/* ============================================================
   Genie — Color tokens
   WHITE-FIRST: the canvas is white (#fff) with near-black ink type —
   the structural foundation, alongside a warm BEIGE (#e7e3dd). Depth
   comes from soft hairlines + soft shadows, not hard outlines.
   SECONDARY: eight accents recombined from the LEGO palette, with
   GENIE BLUE leading — blue, light blue, purple, deep purple, pink,
   green, orange, light orange — used sparingly as small pops on the
   white/black/beige ground (never as full-section fills). The near-
   black NIGHT stage stays available as a [data-theme="dark"] variant.
   ============================================================ */

:root {
  /* ---- Ink / neutrals (PRIMARY — text on light) ---- */
  --ink: #111111;          /* primary text on light surfaces */
  --ink-soft: #54545f;     /* secondary text on light */
  --ink-muted: #8a8a95;    /* captions, meta */
  --line-soft: #ececec;    /* soft borders on light */
  --line-strong: #dadada;

  /* ---- Black canvas + glass (PRIMARY — the default stage) ---- */
  --night-900: #0b0b0c;    /* page canvas — deepest black */
  --night-850: #0f0f11;
  --night-800: #161618;    /* raised dark panel */
  --night-700: #1d1d20;    /* card on dark */
  --night-600: #2a2a2e;    /* hairline / elevated card */
  --night-line: rgba(255,255,255,0.10); /* hairline on dark */
  --night-line-strong: rgba(255,255,255,0.18);
  --glass: rgba(255,255,255,0.05);       /* glossy card film */
  --glass-strong: rgba(255,255,255,0.09);

  /* ---- Surfaces (PRIMARY — white / cream light break) ---- */
  --white: #ffffff;
  --paper: #ffffff;
  --cream: #e7e3dd;        /* warm cream — the logo's light lockup field */
  --paper-soft: #f1ede7;   /* soft warm off-white band */
  --paper-quiet: #f8f6f2;
  --stone-50: #f8f6f2;     /* legacy aliases */
  --stone-100: #f1ede7;
  --stone-300: #dadada;

  --panel-dark:   #161618; /* legacy alias → raised dark panel */
  --panel-darker: #0b0b0c;

  /* ============================================================
     SECONDARY — the 8 LEGO-derived accents (GENIE BLUE leads)
     blue · light blue · purple · deep purple · pink · green ·
     orange · light orange. Small pops only on the white/black/beige
     ground — never full-section fills, never >2 per fold.
     ============================================================ */

  /* ---- BLUE — Genie blue, the leading accent ---- */
  --blue-700: #1374cc;
  --blue-600: #1e90e8;
  --blue-500: #45b3fd;   /* GENIE BLUE — the lead accent */
  --blue-400: #6fc3fd;
  --blue-300: #9fd0ef;   /* light blue */
  --blue-200: #c6e7fe;
  --blue-100: #e6f4ff;
  --blue-light: #9fd0ef; /* the 'light blue' swatch */
  --blue-glow: rgba(69,179,253,0.55);

  /* ---- PURPLE ---- */
  --purple-700: #3a2160;
  --purple-600: #4f2d82;  /* DEEP PURPLE */
  --purple-500: #7c5aa6;  /* PURPLE */
  --purple-400: #9a7fbd;
  --purple-300: #b9a4d4;
  --purple-200: #d8cce9;
  --purple-100: #ece7f3;

  /* ---- PINK ---- */
  --pink-700: #a83a73;
  --pink-600: #cf4a8f;
  --pink-500: #ea5da3;   /* pink */
  --pink-400: #f080b8;
  --pink-300: #f4a6cd;
  --pink-200: #f9cce1;
  --pink-100: #fce6f1;

  /* ---- GREEN ---- */
  --green-700: #134b2b;
  --green-600: #186036;
  --green-500: #1e7a45;   /* green */
  --green-400: #4f9a6c;
  --green-300: #86b99c;
  --green-200: #bdd9c9;
  --green-100: #dceee3;

  /* ---- ORANGE (light orange = the -400 step) ---- */
  --orange-700: #b1521c;
  --orange-600: #d16526;
  --orange-500: #e8732e;  /* orange */
  --orange-400: #f4a463;  /* LIGHT ORANGE */
  --orange-300: #f7bd8c;
  --orange-200: #fbd9bf;
  --orange-100: #fdeadd;

  /* ---- Candy fill shorthands (cards, badges, stat bars) ---- */
  --sky:        var(--blue-300);   /* soft blue fill */
  --sky-200:    var(--blue-200);
  --sky-100:    var(--blue-100);
  --sky-50:     #f2f9ff;
  --coral:      var(--pink-500);   /* coral slot → pink */
  --coral-soft: var(--pink-200);
  --mint:       var(--green-200);  /* mint slot → soft green */

  /* ============================================================
     DEPRECATED accent slots — kept so older components, ui-kits and
     specimens keep resolving; all remapped onto the 8 current accents.
     ============================================================ */
  /* mocha → ORANGE (the warm pop is orange now) */
  --mocha-700: var(--orange-700);
  --mocha-600: var(--orange-600);
  --mocha-500: var(--orange-500);
  --mocha-400: var(--orange-400);
  --mocha-300: var(--orange-300);
  --mocha-200: var(--orange-200);
  --mocha-100: var(--orange-100);
  /* yellow → LIGHT-ORANGE tints (no yellow in the palette) */
  --yellow-700: var(--orange-600);
  --yellow-600: var(--orange-500);
  --yellow-500: var(--orange-400);
  --yellow-400: var(--orange-300);
  --yellow-300: var(--orange-200);
  --yellow-200: var(--orange-100);
  --yellow-100: var(--orange-100);
  --yellow:     var(--orange-400);
  --yellow-soft:var(--orange-200);
  /* violet → BLUE accent (the lead); soft violet pop → pink */
  --violet-700: var(--blue-700);
  --violet-600: var(--blue-600);
  --violet-500: var(--blue-500);
  --violet-400: var(--blue-400);
  --violet-300: var(--blue-300);
  --violet-200: var(--pink-200);
  --violet-100: var(--blue-100);
  --violet-glow: var(--blue-glow);
  /* forest / emerald → GREEN (a real green now exists) */
  --forest:       var(--green-600);
  --forest-soft:  var(--green-500);
  --emerald:      var(--green-500);
  --emerald-300:  var(--green-300);
  --emerald-100:  var(--green-100);
  /* azure → BLUE */
  --azure-700: var(--blue-700);
  --azure-600: var(--blue-600);
  --azure-500: var(--blue-500);
  --azure-400: var(--blue-400);
  /* misc legacy */
  --rose-300: var(--pink-200);
  --sky-600: var(--blue-500);
  --sky-700: var(--blue-700);
  --sky-400: var(--blue-400);

  /* ---- Semantic aliases (WHITE-FIRST — light is the default canvas) ---- */
  --brand:               var(--blue-500);
  --brand-strong:        var(--blue-600);

  --text-primary:        var(--ink);        /* primary text on the white canvas */
  --text-secondary:      var(--ink-soft);
  --text-muted:          var(--ink-muted);
  --text-on-dark:        #ffffff;
  --text-on-light:       var(--ink);
  --text-on-brand:       #ffffff;
  --text-eyebrow:        var(--ink-muted);  /* mono micro-labels read quiet, not loud */
  --text-link:           var(--blue-600);

  --surface-page:        var(--white);      /* the canvas is white */
  --surface-card:        var(--white);      /* cards sit on soft hairlines, not fills */
  --surface-quiet:       var(--paper-quiet);/* faint warm off-white #f8f6f2 */
  --surface-soft:        var(--paper-soft); /* soft warm band #f1ede7 */
  --surface-tint:        var(--blue-100);
  --surface-dark:        var(--night-900);  /* dark stage, used as a punctuation block */
  --surface-forest:      var(--mocha-600);
  --surface-hero:        var(--white);
  --surface-band:        var(--paper-soft);
  --surface-light:       var(--paper-soft);
  --surface-cta:         var(--blue-500);    /* blue closing band */
  --surface-footer:      var(--cream);       /* warm cream footer */
  --surface-modal:       var(--white);

  --outline:             var(--line-soft);

  /* button states */
  --btn-solid-bg:        var(--ink);         /* ink-black primary pill on white */
  --btn-solid-text:      #ffffff;
  --btn-accent-bg:       var(--blue-500);    /* blue accent CTA */
  --btn-accent-text:     #ffffff;
  --btn-overlay:         rgba(0,0,0,0.08);   /* hover veil on light */

  /* status */
  --danger:  #f2545b;
  --success: #46c46b;
}

/* ============================================================
   DARK STAGE — variant. Put data-theme="dark" on any section (or the
   root) to flip the semantic surfaces to the night palette — used for
   signature dark punctuation blocks (hero panels, proof bands, footer).
   The night-*, glass and accent tokens are unchanged by this.
   ============================================================ */
[data-theme="dark"] {
  --text-primary:   var(--white);
  --text-secondary: rgba(255,255,255,0.66);
  --text-muted:     rgba(255,255,255,0.46);
  --text-eyebrow:   rgba(255,255,255,0.56);
  --text-link:      var(--blue-400);

  --surface-page:   var(--night-900);
  --surface-card:   var(--night-700);
  --surface-quiet:  var(--night-800);
  --surface-soft:   var(--night-800);
  --surface-hero:   var(--night-900);
  --surface-band:   var(--night-850);
  --surface-footer: var(--night-900);
  --surface-modal:  var(--night-700);

  --outline:        var(--night-line);

  --btn-solid-bg:   #ffffff;
  --btn-solid-text: var(--ink);
  --btn-overlay:    rgba(255,255,255,0.12);
}