/* See the Tailwind configuration guide for advanced usage
   https://tailwindcss.com/docs/configuration */

@import "tailwindcss" source(none);
@import "phoenix-colocated/dexi/colocated.css";
@source "../css";
@source "../js";
@source "../../lib/dexi_web";

@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
/* Required for Tailwind to automatically pick up changes in colocated CSS files in dev */
@source "../../_build/dev/phoenix-colocated/dexi/*/";

/* A Tailwind plugin that makes "hero-#{ICON}" classes available.
   The heroicons installation itself is managed by your mix.exs */
@plugin "../vendor/heroicons";

 /* Add variants based on LiveView classes */
@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);

/* Use the data attribute for dark mode  */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* Make LiveView wrapper divs transparent for layout */
[data-phx-session], [data-phx-teleported-src] { display: contents }

/* This file is for your main application CSS */

@theme {
  --color-midnight: #080d19;
  --color-deep-slate: #111827;
  --color-slate-blue: #182235;
  --color-muted-steel: #29364d;
  --color-electric-cyan: #22d3ee;
  --color-bright-cyan: #67e8f9;
  --color-soft-violet: #8b5cf6;
  --color-cool-white: #f1f5f9;
  --color-blue-grey: #94a3b8;
  --color-positive: #22c55e;
  --color-negative: #f43f5e;
  --color-warning: #f59e0b;
  --shadow-cyan-glow: 0 24px 80px color-mix(in srgb, var(--color-electric-cyan) 10%, transparent);
  --shadow-modal: 0 28px 100px color-mix(in srgb, var(--color-midnight) 80%, transparent);
}

:root,
[data-theme="light"],
[data-theme="dark"] {
  color-scheme: dark;
  --color-base-100: var(--color-slate-blue);
  --color-base-200: var(--color-deep-slate);
  --color-base-300: var(--color-midnight);
  --color-base-content: var(--color-cool-white);
  --color-primary: var(--color-electric-cyan);
  --color-primary-content: var(--color-midnight);
  --color-secondary: var(--color-soft-violet);
  --color-secondary-content: var(--color-cool-white);
  --color-accent: var(--color-bright-cyan);
  --color-accent-content: var(--color-midnight);
  --color-neutral: var(--color-muted-steel);
  --color-neutral-content: var(--color-cool-white);
  --color-info: var(--color-electric-cyan);
  --color-info-content: var(--color-midnight);
  --color-success: var(--color-positive);
  --color-success-content: var(--color-midnight);
  --color-warning-content: var(--color-midnight);
  --color-error: var(--color-negative);
  --color-error-content: var(--color-cool-white);
}

@layer base {
  html {
    background: var(--color-midnight);
  }

  body {
    min-height: 100vh;
    background:
      radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--color-electric-cyan) 8%, transparent), transparent 30rem),
      radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--color-soft-violet) 10%, transparent), transparent 34rem),
      var(--color-midnight);
    color: var(--color-cool-white);
  }

  input,
  textarea,
  select {
    border-color: var(--color-muted-steel);
    background-color: var(--color-deep-slate);
    color: var(--color-cool-white);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-blue-grey);
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--color-electric-cyan);
    outline-color: var(--color-soft-violet);
  }
}