/* =======================================================================
   Scroll of Fire — Design Tokens
   File: assets/css/tokens.css
   Layers: tokens
   Purpose:
     • Central source of truth for colors, typography, spacing, radii, depth
     • Motion + data preference aware
     • Semantic slots (ink, muted, line, card, accent, gold)
     • Moon theme hooks (—moon-accent, —day-accent, aurora/glow params)
   ======================================================================= */

@layer tokens {
  :root {
    /* -------- Brand / Base Palette (Dark-first) -------- */
    --bg:            #0b0b0f;
    --bg-elev:       #0e0e12;
    --card:          #121219;
    --panel:         #10131b;
    --ink:           #eae7df;
    --muted:         #b8b3a6;
    --line:          #2a2a33;

    /* Accents (primary/secondary) */
    --accent:        #7af3ff; /* cyan fire */
    --accent-2:      #7aa8ff; /* indigo */
    --accent-3:      #7bf3b8; /* mint */
    --gold:          #f3c97a; /* covenant gold */
    --rose:          #ff7aa3; /* warmth */
    --amber:         #ffc46f; /* solar */
    --emerald:       #74ffca; /* earth/verdant */

    /* -------- Semantic Roles -------- */
    --success:       #18c37e;
    --warning:       #ffb62e;
    --danger:        #ff5f5f;
    --info:          #63b3ff;

    /* Text weights (Inter / system UI) */
    --w-regular:     400;
    --w-medium:      500;
    --w-semibold:    600;
    --w-bold:        700;
    --w-black:       900;

    /* Type scale (fluid clamp for headlines, fixed for UI) */
    --fs-2xs: clamp(11px, 0.75vw, 12px);
    --fs-xs:  clamp(12px, 0.85vw, 13px);
    --fs-sm:  14px;
    --fs-md:  15px;   /* base UI */
    --fs-lg:  clamp(16px, 1.15vw, 18px);
    --fs-xl:  clamp(18px, 1.6vw, 22px);
    --fs-2xl: clamp(22px, 2.4vw, 28px);
    --fs-3xl: clamp(26px, 3.2vw, 36px);
    --fs-4xl: clamp(32px, 4.5vw, 48px);

    /* Hebrew display helpers (used in quotes/verses) */
    --fs-he-sm: clamp(18px, 1.4vw, 22px);
    --fs-he-lg: clamp(26px, 2.3vw, 34px);

    /* Line-height presets */
    --lh-tight: 1.15;
    --lh-body:  1.55;
    --lh-loose: 1.75;

    /* Spacing scale */
    --pad-2xs: 6px;
    --pad-xs:  8px;
    --pad-sm:  10px;
    --pad:     12px;
    --pad-md:  14px;
    --pad-lg:  16px;
    --pad-xl:  20px;
    --gap-sm:  8px;
    --gap:     12px;
    --gap-lg:  16px;

    /* Radii / Corners */
    --radius-sm: 10px;
    --radius:    14px;
    --radius-lg: 18px;
    --round:     999px;

    /* Depth / Shadows */
    --rim:       0 10px 30px rgba(0,0,0,.22);
    --rim-soft:  0 6px 18px rgba(0,0,0,.18);
    --rim-hard:  0 14px 40px rgba(0,0,0,.28);
    --inset-1:   inset 0 1px 0 rgba(255,255,255,.03);
    --inset-2:   inset 0 1px 0 rgba(255,255,255,.06);

    /* Borders */
    --bd-1:      1px solid var(--line);
    --bd-2:      2px solid color-mix(in lch, var(--line) 85%, black);

    /* Motion / Timing */
    --ease-std:  cubic-bezier(.22,.61,.36,1);
    --ease-in:   cubic-bezier(.4,0,1,1);
    --ease-out:  cubic-bezier(0,0,.2,1);
    --t-fast:    120ms;
    --t-med:     220ms;
    --t-slow:    440ms;

    /* Z-Index Map */
    --z-below:   -1;
    --z-bg:       0;
    --z-base:     1;
    --z-ui:       10;
    --z-overlay:  30;
    --z-modal:    50;

    /* Backdrop / FX (Aurora + stars; tuned in themes) */
    --fx-aurora-alpha: .055;
    --fx-aurora-size:  1200px 480px;
    --fx-scan-alpha:   .05;

    /* Moon Theme Hooks (overridden per-moon/day in themes.moons.css) */
    --moon-accent: var(--accent);        /* current moon primary */
    --moon-accent-2: var(--accent-2);    /* current moon secondary */
    --day-accent:  color-mix(in oklab, var(--moon-accent) 70%, #ffffff); /* daily sub-tone */
    --sigil-tint:  color-mix(in oklab, var(--moon-accent) 60%, #bfc8ff);

    /* Calendar sizing */
    --cell-size: clamp(36px, 8.5vw, 56px);

    /* Cards / Panels */
    --card-bg:   var(--bg-elev);
    --panel-bg:  linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel) 85%, black));
  }

  /* ----------------- Light Scheme Defaults (auto when active) ---------------- */
  @media (prefers-color-scheme: light) {
    :root {
      --bg:        #f7fbff;
      --bg-elev:   #eef3f8;
      --card:      #f1f5fa;
      --panel:     #eaf0f7;
      --ink:       #0d1220;
      --muted:     #465168;
      --line:      #c9d3e1;

      --accent:    #0aa2b8;
      --accent-2:  #3b63ff;
      --accent-3:  #1fbf89;
      --gold:      #b58523;

      --rim:       0 8px 24px rgba(0,0,0,.08);
      --rim-soft:  0 6px 18px rgba(0,0,0,.06);
      --rim-hard:  0 14px 36px rgba(0,0,0,.1);

      --panel-bg:  linear-gradient(180deg, var(--panel), #e7eef7);
    }
  }

  /* ----------------- High-Contrast Accessibility Tweak ----------------- */
  @media (prefers-contrast: more) {
    :root {
      --line:     color-mix(in oklab, var(--line) 70%, #ffffff);
      --accent:   color-mix(in oklab, var(--accent) 92%, #ffffff);
      --accent-2: color-mix(in oklab, var(--accent-2) 92%, #ffffff);
    }
  }

  /* ----------------- Reduced Motion: dial back FX, keep clarity -------- */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --t-fast:  0ms;
      --t-med:   0ms;
      --t-slow:  0ms;
      --fx-aurora-alpha: .03;
      --fx-scan-alpha:   0;
    }
  }

  /* ----------------- Low Data: soften big backdrops -------------------- */
  @media (prefers-reduced-data: reduce) {
    :root {
      --fx-aurora-alpha: .025;
    }
  }

  /* ----------------- Theme Scope Helpers ------------------------------- */
  /* Body attribute used by moons to toggle scope-specific palettes */
  body[data-theme-scope="wizard"] {
    --accent:    #7af3ff;
    --accent-2:  #7aa8ff;
    --gold:      #f3c97a;
  }

  /* ----------------- Component Slots (used by core/moons/astro CSS) ---- */
  :root {
    /* Ring component */
    --ring-bg-stroke:   #142233;
    --ring-fg-stroke:   var(--moon-accent);
    --ring-width-bg:    10;
    --ring-width-fg:    12;

    /* Week dots */
    --wdot-bg:          #1b2231;
    --wdot-today:       color-mix(in oklab, var(--moon-accent) 70%, #1b2231);

    /* Calendar grid */
    --grid-gap:         6px;
    --grid-border:      var(--bd-1);
    --grid-bg:          var(--bg-elev);
    --grid-radius:      10px;

    /* Cards */
    --card-border:      var(--bd-1);
    --card-radius:      var(--radius);

    /* Table */
    --table-head-bg:    #0e0e12;
    --table-row-border: #1a2130;

    /* Astro wheel */
    --astro-ring-1:     #1b2231;
    --astro-ring-2:     #2a3242;
    --astro-label:      #a7b1ca;

    /* “Shine” panels */
    --shine-radial:     radial-gradient(600px 240px at 80% -10%, color-mix(in oklab, var(--moon-accent) calc(var(--fx-aurora-alpha)*100%), transparent), transparent 70%);
    --shine-linear:     linear-gradient(180deg, var(--bg-elev), color-mix(in oklab, var(--bg-elev) 80%, black));
  }

  /* Utility class tokens (used in core.css but safe here if core is missing) */
  :root {
    --kbd-bg:     #0f1218;
    --kbd-bd:     var(--line);
    --kbd-radius: 6px;
  }
}