/* ==========================================================================
   feature: UI-01, UI-03

   Design tokens. Nothing else in the codebase hardcodes a colour, a blur or a
   radius. Changing the look means changing this file.
   Dark is the default; light is applied by preference or by explicit override.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- palette --- */
  --c-accent:        #6d7cff;
  --c-accent-strong: #4a5bff;
  --c-accent-soft:   #a5aeff;
  --c-success:       #2fb673;
  --c-warning:       #e0a030;
  --c-danger:        #e5484d;
  --c-info:          #3db9e5;

  /* ------------------------------------------------------- background --- */
  /* A fixed, non-scrolling layer. Keeping it out of the scroll container is
     what makes backdrop-filter affordable. */
  --bg-base:      #0d0f1a;
  --bg-accent-1:  #3b2f7a;
  --bg-accent-2:  #1b4b6b;
  --bg-accent-3:  #6d2f5a;

  /* ------------------------------------------------------------ glass --- */
  --glass-bg:          rgba(255, 255, 255, 0.08);
  --glass-bg-hover:    rgba(255, 255, 255, 0.12);
  --glass-bg-strong:   rgba(28, 31, 48, 0.94);  /* opaque fallback */
  --glass-border:      rgba(255, 255, 255, 0.18);
  --glass-border-soft: rgba(255, 255, 255, 0.10);
  --glass-blur:        16px;
  --glass-blur-heavy:  24px;
  --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.28);
  --glass-shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.38);

  /* Solid surface for repeated list items. Reads as part of the same system
     without paying for a per-card blur. See plan/05-design.md. */
  --solid-bg:        rgba(24, 27, 42, 0.88);
  --solid-bg-hover:  rgba(32, 36, 55, 0.94);
  --solid-border:    rgba(255, 255, 255, 0.09);

  /* Scrim placed behind text on a glass surface, so contrast never depends on
     whatever happens to sit behind the blur. */
  --scrim:           rgba(13, 15, 26, 0.55);

  /* The console shell. A shade off the page backdrop so the frame reads
     as a panel floating on it rather than as the page itself. */
  --console-bg:      #08090f;

  /* -------------------------------------------------------------- ink --- */
  --text:            #f2f4f8;
  --text-muted:      #b6bdd0;
  --text-subtle:     #8e96ad;
  --text-on-accent:  #ffffff;
  --text-inverse:    #12141f;

  /* ------------------------------------------------------------ shape --- */
  --r-sm:   8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ------------------------------------------------------------ space --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* ------------------------------------------------------------- type --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;
  --lh-tight: 1.2;
  --lh-base:  1.55;

  /* ----------------------------------------------------------- motion --- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ------------------------------------------------------------ depth --- */
  /* Exactly three elevations plus toasts. Nothing invents a fifth. */
  --z-raised:   1;
  --z-floating: 10;
  --z-overlay:  100;
  --z-toast:    1000;
}

/* ==========================================================================
   Light theme. Declared once in a mixin-style block and applied both by
   preference and by explicit override, so the two can never drift apart.
   ========================================================================== */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-base:      #eef1f8;
    --bg-accent-1:  #c9d2ff;
    --bg-accent-2:  #bfe4f2;
    --bg-accent-3:  #f3cde4;

    --glass-bg:          rgba(255, 255, 255, 0.55);
    --glass-bg-hover:    rgba(255, 255, 255, 0.70);
    --glass-bg-strong:   rgba(252, 253, 255, 0.97);
    --glass-border:      rgba(255, 255, 255, 0.85);
    --glass-border-soft: rgba(19, 24, 48, 0.08);
    --glass-shadow:      0 8px 32px rgba(32, 42, 88, 0.12);
    --glass-shadow-lg:   0 16px 48px rgba(32, 42, 88, 0.18);

    --solid-bg:       rgba(255, 255, 255, 0.92);
    --solid-bg-hover: rgba(255, 255, 255, 1);
    --solid-border:   rgba(19, 24, 48, 0.10);

    --scrim: rgba(255, 255, 255, 0.72);
    --console-bg: #e9edf6;

    --text:          #151a2e;
    --text-muted:    #434c68;
    --text-subtle:   #5d6684;
    --text-inverse:  #ffffff;

    --c-accent:        #3b4ae8;
    --c-accent-strong: #2b39cc;
  }
}

:root[data-theme="light"] {
  --bg-base:      #eef1f8;
  --bg-accent-1:  #c9d2ff;
  --bg-accent-2:  #bfe4f2;
  --bg-accent-3:  #f3cde4;

  --glass-bg:          rgba(255, 255, 255, 0.55);
  --glass-bg-hover:    rgba(255, 255, 255, 0.70);
  --glass-bg-strong:   rgba(252, 253, 255, 0.97);
  --glass-border:      rgba(255, 255, 255, 0.85);
  --glass-border-soft: rgba(19, 24, 48, 0.08);
  --glass-shadow:      0 8px 32px rgba(32, 42, 88, 0.12);
  --glass-shadow-lg:   0 16px 48px rgba(32, 42, 88, 0.18);

  --solid-bg:       rgba(255, 255, 255, 0.92);
  --solid-bg-hover: rgba(255, 255, 255, 1);
  --solid-border:   rgba(19, 24, 48, 0.10);

  --scrim: rgba(255, 255, 255, 0.72);
  --console-bg: #e9edf6;

  --text:          #151a2e;
  --text-muted:    #434c68;
  --text-subtle:   #5d6684;
  --text-inverse:  #ffffff;

  --c-accent:        #3b4ae8;
  --c-accent-strong: #2b39cc;
}