/* ============================================================================
   CELESTIAL UI — DESIGN TOKENS
   Derived from the Nine Awakenings app (app.lauriwilde.com) redesign.

   THREE-STATE THEME (do not change this structure):
     1. :root                         → LIGHT palette (the base definitions)
     2. @media dark + :not([light])   → DARK when the OS is dark and the user
                                        chose "System" (no data-theme set)
     3. :root[data-theme="dark"]      → DARK when the user explicitly chose it
   The server renders data-theme on <html> from the `app_theme` cookie:
     'light' → data-theme="light"   'dark' → data-theme="dark"
     'system' → no attribute         no cookie → DARK (the default look)

   Every colour token is defined in :root FIRST; the dark blocks only
   redefine. Components must use tokens — never literal colours.
   ============================================================================ */

:root {
  /* ── Surfaces ── light periwinkle canvas, deeper periwinkle boxes */
  --color-bg-deep:        #edf4fe;   /* page background */
  --color-bg:             #edf4fe;
  --color-bg-card:        #a9bbde;   /* default box / card / nav surface */
  --color-bg-card-hover:  #9fb2d8;

  /* ── Lines ── near-black outlines in light mode (a signature of the look) */
  --color-border:         #1b2232;
  --color-border-hover:   #0e131d;
  --color-divider:        #c9d0e4;   /* hairlines inside cards / nav */

  /* ── Text ── dark navy; "muted" is deliberately as dark as body in light */
  --color-text:           #1b2232;
  --color-text-muted:     #1b2232;
  --color-text-dim:       #8992a3;   /* placeholders, timestamps */

  /* ── Accent ── NAVY in light (buttons, links, focus, progress) */
  --color-accent:         #254a84;
  --color-accent-hover:   #1c3a68;
  --color-accent-light:   #6453d0;   /* purple — eyebrows, tier text */
  --color-accent-glow:    #dde4f2;   /* focus ring / soft accent fill */
  --color-on-accent:      #ffffff;   /* text on a filled accent */

  /* ── Highlight ── the signature PURPLE card (featured / "current" item) */
  --color-highlight-bg:   #a895e8;
  --color-highlight-line: #641ed8;
  --color-violet:         #6453d0;
  --violet-rgb:           138, 106, 195;

  /* ── Gold ── champagne for special badges (free, premium, points) */
  --color-gold:           #b2923f;
  --color-gold-bg:        rgba(178, 146, 63, 0.14);
  --color-gold-border:    rgba(178, 146, 63, 0.32);

  /* ── Status ── */
  --color-success:        #3e7c58;
  --color-error:          #c0574f;

  /* ── Navigation (sidebar + mobile tab bar) ── */
  --color-nav-bg:         #a9bbde;
  --color-nav-fg:         #2a3142;
  --color-nav-muted:      #5a6274;
  --color-nav-hover:      #e4eafd;   /* hover = lighter than the nav */
  --color-active-bg:      #d4ddf5;   /* selected item, a touch dimmer than hover */
  --color-active-fg:      #6453d0;
  --color-nav-link:       #6453d0;
  --color-tier:           #6453d0;   /* brand word + membership label */

  /* ── Atmosphere ── very faint radial wash behind everything */
  --atmos-1: rgba(80, 100, 170, 0.04);
  --atmos-2: rgba(138, 106, 195, 0.03);

  color-scheme: light;

  /* ── Typography ── Figtree for everything (display + body) */
  --font-display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-btn:  8px;
  --radius-md:   12px;
  --radius-card: 16px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ── Motion ── one easing curve everywhere */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-med:  0.4s;

  /* ── Layout ── */
  --sidebar-width:  240px;
  --tab-bar-height: 72px;
  --content-width:  680px;
}

/* ── DARK — "Azure Celestial". System preference, unless user chose light ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-deep:        #070d17;
    --color-bg:             #0b1220;
    --color-bg-card:        #121c2d;
    --color-bg-card-hover:  #19253a;
    --color-border:         #22314a;
    --color-border-hover:   #2d3f5c;
    --color-divider:        #22314a;
    --color-text:           #e7eef7;
    --color-text-muted:     #94a6bf;
    --color-text-dim:       #65788f;
    --color-accent:         #6ea6e8;
    --color-accent-hover:   #8fbdf0;
    --color-accent-light:   #8fbdf0;
    --color-accent-glow:    rgba(110, 166, 232, 0.16);
    --color-on-accent:      #0a0a0f;
    --color-highlight-bg:   #35265d;
    --color-highlight-line: #814ac8;
    --color-violet:         #814ac8;
    --violet-rgb:           129, 74, 200;
    --color-gold:           #d4b483;
    --color-gold-bg:        rgba(212, 180, 131, 0.14);
    --color-gold-border:    rgba(212, 180, 131, 0.30);
    --color-success:        #6fc39a;
    --color-error:          #e08a82;
    --color-nav-bg:         #121c2d;
    --color-nav-fg:         #94a6bf;
    --color-nav-muted:      #6d7f97;
    --color-nav-hover:      #19253a;
    --color-active-bg:      rgba(110, 166, 232, 0.16);
    --color-active-fg:      #6ea6e8;
    --color-nav-link:       #6d7f97;
    --color-tier:           #d4b483;
    --atmos-1: rgba(110, 166, 232, 0.08);
    --atmos-2: rgba(63, 111, 176, 0.05);
    color-scheme: dark;
  }
}

/* ── DARK — explicit choice; wins over any OS setting ── */
:root[data-theme="dark"] {
  --color-bg-deep:        #070d17;
  --color-bg:             #0b1220;
  --color-bg-card:        #121c2d;
  --color-bg-card-hover:  #19253a;
  --color-border:         #22314a;
  --color-border-hover:   #2d3f5c;
  --color-divider:        #22314a;
  --color-text:           #e7eef7;
  --color-text-muted:     #94a6bf;
  --color-text-dim:       #65788f;
  --color-accent:         #6ea6e8;
  --color-accent-hover:   #8fbdf0;
  --color-accent-light:   #8fbdf0;
  --color-accent-glow:    rgba(110, 166, 232, 0.16);
  --color-on-accent:      #0a0a0f;
  --color-highlight-bg:   #35265d;
  --color-highlight-line: #814ac8;
  --color-violet:         #814ac8;
  --violet-rgb:           129, 74, 200;
  --color-gold:           #d4b483;
  --color-gold-bg:        rgba(212, 180, 131, 0.14);
  --color-gold-border:    rgba(212, 180, 131, 0.30);
  --color-success:        #6fc39a;
  --color-error:          #e08a82;
  --color-nav-bg:         #121c2d;
  --color-nav-fg:         #94a6bf;
  --color-nav-muted:      #6d7f97;
  --color-nav-hover:      #19253a;
  --color-active-bg:      rgba(110, 166, 232, 0.16);
  --color-active-fg:      #6ea6e8;
  --color-nav-link:       #6d7f97;
  --color-tier:           #d4b483;
  --atmos-1: rgba(110, 166, 232, 0.08);
  --atmos-2: rgba(63, 111, 176, 0.05);
  color-scheme: dark;
}