/* ─────────────────────────────────────────────────────────────
   BANDEIRA*TECH — design tokens (public portal)

   Architecture in two layers:
     1. PRIMARY PALETTE — canonical brand colors at :root.
        Mode-independent. The tokens of truth.
     2. CONTENT ARCHITECTURE — per-mode role mapping.
        `[data-sky="day"]`   → classic blue sky + gold wordmark
        `[data-sky="night"]` → deep navy sky + antique gold wordmark
   ───────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────
   PRIMARY PALETTE — mode-independent canonical brand colors
   ────────────────────────────────────────────────────────────── */
:root {
  /* Brand blue — electric core ramp */
  --brand-blue-core:  #001CFF;
  --brand-blue-warm:  #2B47FF;
  --brand-blue-soft:  #6E84FF;
  --brand-blue-pale:  #B3C2FF;
  --brand-blue-cream: #E2E8FF;

  /* Brand gold — sun / star ramp */
  --brand-gold-core:  #FFB800;
  --brand-gold-warm:  #FFC93D;
  --brand-gold-soft:  #FFD978;
  --brand-gold-pale:  #FFE9A8;
  --brand-gold-cream: #FFF4D6;

  /* Brand night — deep navy sky ramp */
  --brand-night-zenith: #050818;
  --brand-night-high:   #0D1226;
  --brand-night-mid:    #161C38;
  --brand-night-low:    #232A52;
  --brand-night-haze:   #313970;

  /* Brand sunrise — warm yellow → deep orange (day sky variant) */
  --brand-sunrise-zenith: #FFB800;
  --brand-sunrise-high:   #FFA51F;
  --brand-sunrise-mid:    #FF8E22;
  --brand-sunrise-low:    #FF761A;
  --brand-sunrise-haze:   #FF5C00;

  /* Brand antique gold — the star at night */
  --brand-antique-core:  #C9A867;
  --brand-antique-warm:  #DAB97A;
  --brand-antique-soft:  #E8CB94;
  --brand-antique-pale:  #F3DDB2;
  --brand-antique-cream: #FBEED1;

  /* Brand paper — warm cream (day content) */
  --brand-paper-bright: #FAFAF7;
  --brand-paper-warm:   #F4F1EA;
  --brand-paper-shade:  #E9E4D8;

  /* Brand dim — warm parchment (night content) */
  --brand-dim-bright: #2A241A;
  --brand-dim-warm:   #1F1A14;
  --brand-dim-shade:  #15110C;

  /* Brand ink */
  --brand-ink-deep:      #0A0E1F;
  --brand-ink-mid:       #2D3550;
  --brand-ink-warm:      #F0E9D6;
  --brand-ink-warm-soft: #BFB6A2;

  /* Type — mode-independent */
  --font-display: 'Ubuntu', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  --weight-display:        500;
  --weight-display-strong: 700;
  --weight-body:           200;
  --weight-body-mid:       300;

  /* Spacing scale */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem,    0.95rem + 0.27vw, 1.10rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.36vw, 1.35rem);
  --step-2:  clamp(1.40rem, 1.28rem + 0.55vw, 1.70rem);
  --step-3:  clamp(1.66rem, 1.48rem + 0.85vw, 2.15rem);
  --step-4:  clamp(2.0rem,  1.72rem + 1.30vw, 2.70rem);
  --step-5:  clamp(2.4rem,  2.0rem  + 1.85vw, 3.40rem);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
}


/* ──────────────────────────────────────────────────────────────
   CONTENT ARCHITECTURE — DAY (classic blue sky)
   Default. The original sunlit register: blue sky overhead, gold
   wordmark, yellow accent panels (inverse of sunrise).
   ────────────────────────────────────────────────────────────── */
:root,
[data-sky="day"] {
  /* SKY — deep electric blue → pale blue at horizon */
  --sky-zenith: var(--brand-blue-core);
  --sky-high:   #2238FF;
  --sky-mid:    #4D5FFF;
  --sky-low:    #7E8DFF;
  --sky-haze:   #B5BFFF;

  /* CONTENT — warm paper */
  --paper-bright: var(--brand-paper-bright);
  --paper-warm:   var(--brand-paper-warm);
  --paper-shade:  var(--brand-paper-shade);

  /* INK */
  --ink:      var(--brand-ink-deep);
  --ink-soft: var(--brand-ink-mid);

  /* WORDMARK / sun on sky — gold */
  --sun-core:  var(--brand-gold-core);
  --sun-warm:  var(--brand-gold-warm);
  --sun-soft:  var(--brand-gold-soft);
  --sun-pale:  var(--brand-gold-pale);
  --sun-cream: var(--brand-gold-cream);

  /* Glow — hot pale filament-core + saturated gold halo. The core
     is what reads as "lit"; the halo is what reads as "in the sky." */
  --mark-core: rgba(255, 244, 214, 0.95);
  --mark-glow: rgba(255, 184, 0, 0.55);
  --star-core: rgba(255, 248, 224, 1);
  --star-glow: rgba(255, 184, 0, 0.70);

  /* Sky text — warm gold on blue */
  --sky-text: var(--sun-warm);

  /* Semantic */
  --bg:       var(--paper-warm);
  --fg:       var(--ink);
  --fg-muted: rgba(10, 14, 31, 0.62);
  --hairline: rgba(10, 14, 31, 0.10);
  --rule:     rgba(10, 14, 31, 0.18);

  /* LINK on paper — brand-blue reads as the brand mark for in-content
     links on cream. Distinct from --accent-core (which is the accent
     panel body, yellow in day) so it stays legible on paper. */
  --link: var(--brand-blue-core);

  /* PRIMARY action — blue background, gold text. Same anchor pair as
     the wordmark on sky: --sky-zenith bg + --sun-core text. */
  --primary-bg:   var(--sky-zenith);
  --primary-text: var(--sun-core);
  --primary-hover-shadow: rgba(0, 0, 0, 0.18);

  /* ACCENT panel — INVERSE of sunrise: yellow body + electric-blue
     heading + dark navy body text. */
  --accent-core:       var(--brand-gold-core);
  --accent-warm:       var(--brand-gold-warm);
  --accent-soft:       var(--brand-gold-soft);
  --accent-cream:      var(--brand-gold-cream);
  --accent-text:       var(--brand-ink-deep);
  --accent-text-muted: var(--brand-ink-mid);
  --accent-heading:    var(--brand-blue-core);

  /* Masthead atmosphere — blue zenith plate (78%) then accelerating
     descent through lighter blues into pale horizon. */
  --atmosphere:
    linear-gradient(
      180deg,
      var(--sky-zenith) 0    78%,
      var(--sky-high)  78%   85%,
      var(--sky-mid)   85%   91%,
      var(--sky-low)   91%   96%,
      var(--sky-haze)  96%  100%
    );

  /* Horizon shadow — the dim band beneath the gold horizon plate.
     Has to be defined per-mode because day --ink is deep navy
     (correct shadow) but night --ink is light starlight cream
     (would brighten, not darken). */
  --horizon-shadow-soft: var(--brand-ink-mid);
  --horizon-shadow:      var(--brand-ink-deep);

  /* Gold horizon footer — saturated brand gold plate (anchors to the
     wordmark colour) then a brief warm band before the ink shadow. */
  --gold-stripes:
    linear-gradient(
      180deg,
      var(--sun-core)             0     94%,
      var(--sun-warm)             94%   97%,
      var(--horizon-shadow-soft)  97%   99%,
      var(--horizon-shadow)       99%  100%
    );
}


/* ──────────────────────────────────────────────────────────────
   CONTENT ARCHITECTURE — NIGHT (deep navy + antique gold)
   ────────────────────────────────────────────────────────────── */
[data-sky="night"] {
  /* SKY — night navy ramp */
  --sky-zenith: var(--brand-night-zenith);
  --sky-high:   var(--brand-night-high);
  --sky-mid:    var(--brand-night-mid);
  --sky-low:    var(--brand-night-low);
  --sky-haze:   var(--brand-night-haze);

  /* CONTENT — warm dim parchment */
  --paper-bright: var(--brand-dim-bright);
  --paper-warm:   var(--brand-dim-warm);
  --paper-shade:  var(--brand-dim-shade);

  /* INK — warm starlight */
  --ink:      var(--brand-ink-warm);
  --ink-soft: var(--brand-ink-warm-soft);

  /* WORDMARK / star — antique gold */
  --sun-core:  var(--brand-antique-core);
  --sun-warm:  var(--brand-antique-warm);
  --sun-soft:  var(--brand-antique-soft);
  --sun-pale:  var(--brand-antique-pale);
  --sun-cream: var(--brand-antique-cream);

  /* Glow — at night the core is a cool starlight white, halo antique. */
  --mark-core: rgba(243, 232, 208, 0.85);
  --mark-glow: rgba(201, 168, 103, 0.55);
  --star-core: rgba(255, 250, 232, 1);
  --star-glow: rgba(243, 221, 178, 0.80);

  /* Sky text — pale gold on navy */
  --sky-text: var(--sun-pale);

  /* Semantic */
  --bg:       var(--paper-warm);
  --fg:       var(--ink);
  --fg-muted: rgba(240, 233, 214, 0.58);
  --hairline: rgba(240, 233, 214, 0.10);
  --rule:     rgba(240, 233, 214, 0.18);

  /* LINK on dim parchment — antique gold is the night's contrast mark.
     Brand-blue would disappear against the warm-dark paper. */
  --link: var(--brand-antique-core);

  /* PRIMARY action — the NIGHT blue background (deep navy zenith) +
     antique gold text. Mirrors the wordmark colors at night. */
  --primary-bg:   var(--sky-zenith);
  --primary-text: var(--sun-core);
  --primary-hover-shadow: rgba(0, 0, 0, 0.50);

  /* ACCENT panel at night — body is the SAME deep navy as the sky
     zenith (the blue the wordmark sits on at night). Heading stays
     gold, body text cream — brand voice constant. */
  --accent-core:       var(--brand-night-zenith);
  --accent-warm:       var(--brand-night-mid);
  --accent-soft:       var(--brand-night-low);
  --accent-cream:      var(--brand-night-haze);
  --accent-text:       var(--brand-paper-bright);
  --accent-text-muted: var(--brand-gold-pale);
  --accent-heading:    var(--brand-gold-core);

  --atmosphere:
    linear-gradient(
      180deg,
      var(--sky-zenith) 0     88%,
      var(--sky-high)  88%    92.5%,
      var(--sky-mid)   92.5%  96%,
      var(--sky-low)   96%    98.4%,
      var(--sky-haze)  98.4% 100%
    );

  /* Horizon shadow at night → the deep navy of the night sky itself,
     so the antique-gold horizon fades into the same darkness overhead. */
  --horizon-shadow-soft: var(--brand-night-high);
  --horizon-shadow:      var(--brand-night-zenith);

  --gold-stripes:
    linear-gradient(
      180deg,
      var(--sun-core)             0     94%,
      var(--sun-warm)             94%   97%,
      var(--horizon-shadow-soft)  97%   99%,
      var(--horizon-shadow)       99%  100%
    );
}


/* ──────────────────────────────────────────────────────────────
   CONTENT ARCHITECTURE — DAY · SUNRISE (warm yellow sky, blue mark)
   Yellow zenith → deep orange horizon. Wordmark flips to electric
   blue so it reads against the sun-colored sky.
   ────────────────────────────────────────────────────────────── */
[data-sky="sunrise"] {
  --sky-zenith: var(--brand-sunrise-zenith);
  --sky-high:   var(--brand-sunrise-high);
  --sky-mid:    var(--brand-sunrise-mid);
  --sky-low:    var(--brand-sunrise-low);
  --sky-haze:   var(--brand-sunrise-haze);

  --paper-bright: var(--brand-paper-bright);
  --paper-warm:   var(--brand-paper-warm);
  --paper-shade:  var(--brand-paper-shade);

  --ink:      var(--brand-ink-deep);
  --ink-soft: var(--brand-ink-mid);

  /* Wordmark / sun — electric blue on the warm sky */
  --sun-core:  var(--brand-blue-core);
  --sun-warm:  var(--brand-blue-warm);
  --sun-soft:  var(--brand-blue-soft);
  --sun-pale:  var(--brand-blue-pale);
  --sun-cream: var(--brand-blue-cream);

  /* Glow — gold halo around the blue mark */
  --mark-glow: rgba(255, 184, 0, 0.45);
  --star-glow: rgba(255, 184, 0, 0.55);

  --sky-text: var(--sun-warm);

  --bg:       var(--paper-warm);
  --fg:       var(--ink);
  --fg-muted: rgba(10, 14, 31, 0.62);
  --hairline: rgba(10, 14, 31, 0.10);
  --rule:     rgba(10, 14, 31, 0.18);

  --link: var(--brand-blue-core);

  --primary-bg:   var(--brand-blue-core);
  --primary-text: var(--brand-gold-core);

  /* Accent — blue body, gold heading (mirror of day's gold-body inverse) */
  --accent-core:       var(--brand-blue-core);
  --accent-warm:       var(--brand-blue-warm);
  --accent-soft:       var(--brand-blue-soft);
  --accent-cream:      var(--brand-blue-cream);
  --accent-text:       var(--brand-paper-bright);
  --accent-text-muted: var(--brand-gold-pale);
  --accent-heading:    var(--brand-gold-core);

  --atmosphere:
    linear-gradient(
      180deg,
      var(--sky-zenith) 0    78%,
      var(--sky-high)  78%   85%,
      var(--sky-mid)   85%   91%,
      var(--sky-low)   91%   96%,
      var(--sky-haze)  96%  100%
    );

  --horizon-shadow-soft: var(--brand-ink-mid);
  --horizon-shadow:      var(--brand-ink-deep);

  --gold-stripes:
    linear-gradient(
      180deg,
      var(--sun-warm)            0     94%,
      var(--sun-core)            94%   96.5%,
      var(--sun-warm)            96.5% 98%,
      var(--horizon-shadow-soft) 98%   99.2%,
      var(--horizon-shadow)      99.2% 100%
    );
}


/* ──────────────────────────────────────────────────────────────
   CONTENT ARCHITECTURE — DAY · MORNING (blue zenith, sunrise horizon)
   Blue overhead like classic day, but the bottom of the sky burns
   into the sunrise ramp — morning lit from underneath.
   ────────────────────────────────────────────────────────────── */
[data-sky="morning"] {
  --sky-zenith: var(--brand-blue-core);
  --sky-high:   var(--brand-sunrise-zenith);
  --sky-mid:    var(--brand-sunrise-mid);
  --sky-low:    var(--brand-sunrise-low);
  --sky-haze:   var(--brand-sunrise-haze);

  --paper-bright: var(--brand-paper-bright);
  --paper-warm:   var(--brand-paper-warm);
  --paper-shade:  var(--brand-paper-shade);

  --ink:      var(--brand-ink-deep);
  --ink-soft: var(--brand-ink-mid);

  --sun-core:  var(--brand-gold-core);
  --sun-warm:  var(--brand-gold-warm);
  --sun-soft:  var(--brand-gold-soft);
  --sun-pale:  var(--brand-gold-pale);
  --sun-cream: var(--brand-gold-cream);

  --mark-glow: rgba(255, 184, 0, 0.40);
  --star-glow: rgba(255, 184, 0, 0.55);

  --sky-text: var(--sun-warm);

  --bg:       var(--paper-warm);
  --fg:       var(--ink);
  --fg-muted: rgba(10, 14, 31, 0.62);
  --hairline: rgba(10, 14, 31, 0.10);
  --rule:     rgba(10, 14, 31, 0.18);

  --link: var(--brand-blue-core);

  --primary-bg:   var(--brand-blue-core);
  --primary-text: var(--brand-gold-core);

  --accent-core:       var(--brand-blue-core);
  --accent-warm:       var(--brand-blue-warm);
  --accent-soft:       var(--brand-blue-soft);
  --accent-cream:      var(--brand-blue-cream);
  --accent-text:       var(--brand-paper-bright);
  --accent-text-muted: var(--brand-gold-pale);
  --accent-heading:    var(--brand-gold-core);

  --atmosphere:
    linear-gradient(
      180deg,
      var(--sky-zenith) 0    78%,
      var(--sky-high)  78%   85%,
      var(--sky-mid)   85%   91%,
      var(--sky-low)   91%   96%,
      var(--sky-haze)  96%  100%
    );

  --horizon-shadow-soft: var(--brand-ink-mid);
  --horizon-shadow:      var(--brand-ink-deep);

  --gold-stripes:
    linear-gradient(
      180deg,
      var(--sun-warm)            0     94%,
      var(--sun-core)            94%   96.5%,
      var(--sun-warm)            96.5% 98%,
      var(--horizon-shadow-soft) 98%   99.2%,
      var(--horizon-shadow)      99.2% 100%
    );
}


/* ──────────────────────────────────────────────────────────────
   Honour prefers-color-scheme when no explicit attr is set
   ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-sky]) {
    /* Mirror the [data-sky="night"] mapping. JS will set data-sky
       explicitly once it runs; this is the pre-paint fallback. */
    --sky-zenith: var(--brand-night-zenith);
    --sky-high:   var(--brand-night-high);
    --sky-mid:    var(--brand-night-mid);
    --sky-low:    var(--brand-night-low);
    --sky-haze:   var(--brand-night-haze);
    --paper-bright: var(--brand-dim-bright);
    --paper-warm:   var(--brand-dim-warm);
    --paper-shade:  var(--brand-dim-shade);
    --ink:      var(--brand-ink-warm);
    --ink-soft: var(--brand-ink-warm-soft);
    --sun-core:  var(--brand-antique-core);
    --sun-warm:  var(--brand-antique-warm);
    --sun-pale:  var(--brand-antique-pale);
    --mark-core: rgba(243, 232, 208, 0.85);
    --mark-glow: rgba(201, 168, 103, 0.55);
    --star-core: rgba(255, 250, 232, 1);
    --star-glow: rgba(243, 221, 178, 0.80);
    --horizon-shadow-soft: var(--brand-night-high);
    --horizon-shadow:      var(--brand-night-zenith);
    --sky-text: var(--sun-pale);
    --bg:       var(--paper-warm);
    --fg:       var(--ink);
    --fg-muted: rgba(240, 233, 214, 0.58);
    --hairline: rgba(240, 233, 214, 0.10);
    --rule:     rgba(240, 233, 214, 0.18);
    --link:     var(--brand-antique-core);
    --primary-bg:   var(--sky-zenith);
    --primary-text: var(--sun-core);
    --accent-core:       var(--brand-night-zenith);
    --accent-warm:       var(--brand-night-mid);
    --accent-soft:       var(--brand-night-low);
    --accent-cream:      var(--brand-night-haze);
    --accent-text:       var(--brand-paper-bright);
    --accent-text-muted: var(--brand-gold-pale);
    --accent-heading:    var(--brand-gold-core);
  }
}