/* ════════════════════════════════════════════════════════════════
   TOKENS.CSS — Milky Way Web Studio
   Primitive Design Tokens — site-wide / global
   
   Numbering system: hue position on 360° color wheel
   Brand colors:   050–799  (spaced min 25, exception noted for close pairs)
   Neon colors:    clr-neon-100–900
   Neutrals:       clr-neutral-050–950  (light → dark)
   Text constants: clr-text-100–900 (theme-flipping) + always variants
   Shadows:        site-wide shadow & overlay values
   Nav:            site-wide nav tokens
   Footer:         site-wide footer tokens

   Semantic tokens (page-specific) live at the top of each page CSS file.
   ════════════════════════════════════════════════════════════════ */

:root                { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light;      }
[data-theme="dark"]  { color-scheme: dark;       }

:root,
[data-theme="light"] {

    /* ════════════════════════════════════════
       SECTION 1 — BRAND COLORS
       Numbered by hue position on 360° color wheel
       ════════════════════════════════════════ */

    /* — Reds  ~6°  ———————————————————————— */
    --clr-050: light-dark(hsl(6,  78%, 57%),  hsl(6,  78%, 65%));   /* primary red    */
    --clr-075: light-dark(hsl(6,  78%, 47%),  hsl(6,  78%, 55%));   /* dark red        */

    /* — Oranges  ~38–43°  (temporary exception: hues closer than 25°) — */
    --clr-100: light-dark(hsl(38, 100%, 50%),  hsl(38, 100%, 60%));  /* brand orange   */
    --clr-125: light-dark(hsl(43, 100%, 45%),  hsl(43, 100%, 58%));  /* dark orange    */

    /* — Yellow  ~54°  ————————————————————— */
    --clr-150: light-dark(hsl(54, 100%, 62%),  hsl(54, 100%, 68%));  /* bright yellow  */

    /* — open slots: 175, 200, 225, 250, 275 ——————————————————— */

    /* — Greens  ~145°  ———————————————————— */
    --clr-300: light-dark(hsl(145,  63%, 42%),  hsl(145,  63%, 55%)); /* brand green   */

    /* — open slots: 325, 350, 375, 400, 425, 450, 475 ————————— */

    /* — Blues  ~195–220°  ————————————————— */
    --clr-500: light-dark(hsl(204,  64%, 52%),  hsl(204,  64%, 65%)); /* brand blue    */
    --clr-525: light-dark(hsl(220,  65%, 30%),  hsl(220,  65%, 55%)); /* dark blue     */

    /* — open slots: 550, 575, 600, 625, 650, 675 —————————————— */

    /* — Purples  ~270°  ——————————————————— */
    --clr-700: light-dark(#5912a1,  #8c36e2); /* brand purple  */
   
    /* — open slots: 725, 750, 775 ————————————————————————————— */


    /* ════════════════════════════════════════
       SECTION 2 — NEON COLORS
       Numbered by hue position on 360° color wheel
       ════════════════════════════════════════ */

    /* — open slot: clr-neon-100, 200 ————————————————————————— */

    --clr-neon-300: hsl(120, 100%, 50%);    /* neon green   ~120° */

    /* — open slot: clr-neon-400 ————————————————————————————— */

    --clr-neon-500: hsl(195, 100%, 50%);    /* neon blue    ~195° */

    /* — open slot: clr-neon-600 ————————————————————————————— */

    --clr-neon-700: #bb33ff;    /* neon purple  ~280° */

    /* — open slot: clr-neon-800 ————————————————————————————— */

    --clr-neon-900: hsl(270,  20%, 12%);    /* cosmic dark bg     */


    /* ════════════════════════════════════════
       SECTION 3 — NEUTRALS
       light → dark: 050 (white) → 950 (black)
       ════════════════════════════════════════ */

    --clr-neutral-050: light-dark(hsl(220, 14%, 100%),  hsl(220, 14%,   7%)); /* pure white  / deepest black */
    --clr-neutral-100: light-dark(hsl(220, 10%,  97%),  hsl(220, 10%,  12%)); /* off white   / near black    */

    /* — open slot: 150 (warm white / beige / tan) ————————————— */

    --clr-neutral-200: light-dark(hsl(220,  8%,  85%),  hsl(220,  8%,  22%)); /* light gray  / dark gray     */
    --clr-neutral-300: light-dark(hsl(220,  7%,  70%),  hsl(220,  7%,  35%)); /* mid-light gray              */
    --clr-neutral-400: light-dark(hsl(220,  7%,  60%),  hsl(220,  7%,  45%)); /* mid gray                    */
    --clr-neutral-500: light-dark(hsl(220,  7%,  45%),  hsl(220,  8%,  60%)); /* mid-dark gray               */
    --clr-neutral-600: light-dark(hsl(220,  7%,  35%),  hsl(220,  8%,  75%)); /* dark gray                   */
    --clr-neutral-700: light-dark(hsl(220, 10%,  20%),  hsl(220, 10%,  88%)); /* darker gray                 */
    --clr-neutral-800: light-dark(hsl(220, 12%,  12%),  hsl(220, 12%,  94%)); /* very dark / near white      */

    /* — open slot: 850 (warm dark / brown) ———————————————————— */

    --clr-neutral-900: light-dark(hsl(220, 14%,   7%),  hsl(220, 14%,  97%)); /* near black  / off white     */
    --clr-neutral-950: hsl(220, 14%, 2%);                                      /* black — always              */

    /* ════════════════════════════════════════
       SECTION 4 — TEXT CONSTANTS

       Group 1: theme-flipping (uses light-dark())
       Group 2: always-fixed (never flip — suffix -always)
       ════════════════════════════════════════ */

    /* — Group 1: Theme-flipping text ————————————————————————— */
    --clr-text-100: light-dark(hsl(220, 14%, 98%),  hsl(220, 14%,  8%));  /* near white  / near black   */
    --clr-text-300: light-dark(hsl(220, 10%, 85%),  hsl(220, 10%, 22%));  /* light gray  / dark gray    */
    --clr-text-500: light-dark(hsl(220,  7%, 50%),  hsl(220,  7%, 60%));  /* mid gray    / mid gray     */
    --clr-text-700: light-dark(hsl(220,  7%, 25%),  hsl(220,  8%, 82%));  /* dark gray   / light gray   */
    --clr-text-900: light-dark(hsl(220, 14%,  7%),  hsl(220, 14%, 97%));  /* near black  / near white   */

    /* Semantic aliases (used in body/heading/muted) */
    --clr-text-heading:  var(--clr-text-900);   /* h1–h3                   */
    --clr-text-body:     var(--clr-text-700);   /* paragraphs              */
    --clr-text-muted:    var(--clr-text-500);   /* captions, placeholders  */
    --clr-text-inverted: var(--clr-text-100);   /* text on dark surfaces   */

    /* — Group 2: Always-fixed text (never flip with theme) ————— */
    --clr-text-white-always:  hsl(0,   0%, 100%);   /* always white            */
    --clr-text-light-always:  hsl(192, 15%,  94%);  /* always light warm gray  */
    --clr-text-medium-always: hsl(210, 14%,  83%);  /* always medium gray      */
    --clr-text-dark-always:   hsl(0,   0%,  20%);   /* always dark             */
    --clr-text-black-always:  hsl(0,   0%,   0%);   /* always black            */


    /* ════════════════════════════════════════
       SECTION 5 — SHADOWS & OVERLAYS
       Site-wide / global
       ════════════════════════════════════════ */

    /* Overlays */
    --clr-overlay-100: light-dark(hsla(220, 14%,  0%, 0.3),  hsla(220, 14%, 100%, 0.3));
    --clr-overlay-200: light-dark(hsla(220, 14%,  0%, 0.6),  hsla(220, 14%, 100%, 0.6));

    /* Neutral shadows */
    --clr-shadow-100:  light-dark(hsla(220, 20%,  0%, 0.08), hsla(220, 20%,  0%, 0.30));
    --clr-shadow-200:  light-dark(hsla(220, 20%,  0%, 0.16), hsla(220, 20%,  0%, 0.50));
    --clr-shadow-300:  light-dark(hsla(220, 20%,  0%, 0.28), hsla(220, 20%,  0%, 0.70));

    /* Semantic shadow aliases */
    --clr-scrim:        var(--clr-overlay-100);
    --clr-scrim-heavy:  var(--clr-overlay-200);
    --clr-shadow-sm:    var(--clr-shadow-100);
    --clr-shadow-md:    var(--clr-shadow-200);
    --clr-shadow-lg:    var(--clr-shadow-300);

    /* Colored shadows (brand) */
    --clr-shadow-blue:          hsla(204,  64%, 52%, 0.4);
    --clr-shadow-blue-dk:       hsla(204,  64%, 52%, 0.3);
    --clr-shadow-orange:        hsla(43,   95%, 47%, 0.5);
    --clr-shadow-orange-dk:     hsla(43,   95%, 47%, 0.4);
    --clr-shadow-green:         hsla(145,  63%, 42%, 0.5);
    --clr-shadow-green-dk:      hsla(145,  63%, 42%, 0.4);
    --clr-shadow-red:           hsla(6,    78%, 57%, 0.5);
    --clr-shadow-red-dk:        hsla(6,    78%, 57%, 0.4);

    /* Fire effect shadows */
    --clr-fire-orange-1:        hsla(39,  100%, 50%, 0.8);
    --clr-fire-orange-2:        hsla(33,  100%, 50%, 0.6);
    --clr-fire-orange-3:        hsla(16,  100%, 50%, 0.4);
    --clr-fire-red-1:           hsla(0,   100%, 50%, 0.8);

    /* Surface & background tokens */
    --clr-bg:               var(--clr-neutral-050);         /* page background         */
    --clr-bg-surface:       var(--clr-neutral-100);         /* cards, panels           */
    --clr-bg-elevated:      var(--clr-neutral-200);         /* tooltips, dropdowns     */
    --clr-bg-hero:          light-dark(hsl(225, 43%, 93%),  hsl(225, 20%, 18%));
    --clr-bg-cosmic:        var(--clr-neon-900);            /* neon section dark bg    */

    /* Border tokens */
    --clr-border:           var(--clr-neutral-200);         /* default border          */
    --clr-border-strong:    var(--clr-neutral-400);         /* emphasized border       */

    /* Typography */
    --font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --line-height:  1.6;


    /* ════════════════════════════════════════
       SITE-WIDE SEMANTIC ALIASES
       Brand + interactive — used across pages
       ════════════════════════════════════════ */

    --clr-brand-orange:         var(--clr-100);
    --clr-brand-orange-dk:      var(--clr-125);
    --clr-brand-green:          var(--clr-300);
    --clr-brand-blue:           var(--clr-500);
    --clr-brand-blue-dk:        var(--clr-525);
    --clr-brand-purple:         var(--clr-700);

    --clr-interactive:          var(--clr-500);             /* links, focus rings      */
    --clr-interactive-hover:    var(--clr-525);             /* hover state             */


    /* ════════════════════════════════════════
       SECTION 6 — FOOTER TOKENS
       Site-wide / global
       ════════════════════════════════════════ */

    --clr-footer-bg:            light-dark(hsl(210, 29%, 24%),  hsl(210, 29%, 14%));
    --clr-footer-text:          var(--clr-text-light-always);
    --clr-footer-heading:       var(--clr-500);                /* brand blue            */
    --clr-footer-link:          var(--clr-text-light-always);
    --clr-footer-link-hover:    var(--clr-500);                /* brand blue            */
    --clr-footer-muted:         var(--clr-text-medium-always);
    --clr-footer-bottom-text:   light-dark(hsl(204,  7%, 62%),  hsl(204,  7%, 50%));
    --clr-footer-border:        light-dark(hsl(210, 29%, 29%),  hsl(210, 29%, 18%));
}