/* ============================================================
   Design tokens — single source of truth for the portfolio.
   Change colours here and every page updates.
   ============================================================ */

/* Overscroll: nav-light at top, footer-dark at bottom.
   html paints the "canvas" — visible only where body doesn't cover
   (i.e. rubber-band overscroll below the last content). Body's own
   background (--bg) shows on top overscroll (body extends upward). */
html { background: var(--surface-dark); }

/* Mobile: nav gets a solid --bg fill instead of translucent, so
   coloured content beneath doesn't bleed through (and it merges
   cleanly with the phone's status bar, which sits on top). */
@media (max-width: 900px) {
  .site-nav {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

:root {
  /* ---- Surface (cool off-whites) ---- */
  --bg: #FCFCFE;              /* page bg — cool off-white with violet tint */
  --paper: #FFFFFF;
  --paper-2: #F5F5F8;         /* cool subtle surface */
  --surface-cool: #F6F6F8;
  --surface-cool-2: #F4F4F6;
  --surface-dark: #0E0D18;    /* deep indigo-black */
  --surface-dark-2: #1E1C2A;
  --surface-dark-3: #262432;
  --pure-black: #000000;

  /* ---- Text (cool) ---- */
  --ink: #100D1A;             /* near-black with violet undertone */
  --body: #24222E;
  --ink-invert: #FCFCFE;
  --muted: #6E6B7A;           /* cool gray with violet hint */
  --muted-1: #8A889A;
  --muted-2: #6A6878;
  --muted-3: #55536A;
  --muted-4: #444258;
  --muted-5: #333143;
  --muted-6: #ADABB8;
  --muted-shade: #C4C2CE;

  /* ---- Hair ---- */
  --hair: #E4E3EC;            /* cool violet-gray hairline */
  --hair-cool: #E0E0E8;

  /* ---- Brand accent — BLUE-VIOLET ---- */
  --accent: #4A67D1;
  --accent-soft: rgba(74,103,209,0.12);
  --accent-tint: rgba(74,103,209,0.08);
  --accent-solid-tint: #E2E6F5;

  /* ---- Semantic hues (kept close to warm palette — these are functional) ---- */
  --earn: #4B9B72;            /* teal-shifted from green for cool harmony */
  --earn-soft: rgba(75,155,114,0.12);
  --burn: #C7495D;            /* fresh cranberry-rose — sat-matched to --accent/--earn */
  --burn-soft: rgba(199,73,93,0.14);
  --burn-tint: rgba(199,73,93,0.06);   /* subtle row bg — half strength of --burn-soft */
  --amber: #DFA83D;           /* warmer accent, kept as counterbalance */
  --amber-soft: rgba(223,168,61,0.14);
  --avail: #4CB584;            /* teal availability chip */

  /* ---- Data-viz palette ----
     Sequential monochromatic ramp of the brand accent — worst → best.
     Faded = not there yet. Saturated = established. */
  --data-worst:   #E1E6F8;      --data-worst-ink:   #4A67D1;  /* palest tint  — 0 / not in place */
  --data-bad:     #B3BCEA;      --data-bad-ink:     #1E274F;  /* pale blue    — 1 / bad */
  --data-mid:     #8391D9;      --data-mid-ink:     #FFFFFF;  /* mid blue     — 2 / mid */
  --data-good:    #4A67D1;      --data-good-ink:    #FFFFFF;  /* full accent  — 3 / established */
  /* Neutral for "no data / n/a" cases (not part of the gradient) */
  --data-neutral: #D5D5DA;      --data-neutral-ink: #4A4A50;

  /* ---- Craft grid (unchanged — decorative) ---- */
  --craft-coral: #FF6B4A;
  --craft-pink: #EC4899;
  --craft-purple: #9D5EC1;
  --craft-blue: #4361EE;
  --craft-emerald: #10B981;
  --craft-sage: #7BB394;
  --craft-gold: #E6B94E;
  --craft-rust: #B8524E;
  --tint-coral: #FDF8F4;
  --tint-pink: #FCF6F9;
  --tint-purple: #FAF7FC;
  --tint-blue: #F7F8FD;
  --tint-emerald: #F6FAF7;
  --tint-sage: #D9E3DC;
  --tint-gold: #EDE1D4;
  --tint-rust: #EBDBE3;
  --tint-blue-2: #DCDFE9;
  --tint-purple-2: #E5DDEC;

  /* ---- Extended text ---- */
  --body-2: #3A374A;
  --muted-warm: #55536A;
  --muted-warm-2: #6A6878;
  --muted-warm-3: #8A889A;
  --muted-alt: #6A6878;
  --ink-2: #1E1C2A;
  --ink-3: #262432;

  /* ---- Extended surfaces ---- */
  --surface-warm-1: #EEEEF3;
  --surface-warm-2: #F0F0F4;
  --surface-warm-3: #F5F5F9;
  --surface-off-1: #F6F6F9;
  --surface-off-2: #F7F7FA;
  --surface-off-3: #F4F4F6;
  --surface-off-4: #F8F9FC;
  --surface-gray: #C8C6D2;
  --surface-cool-blue-1: #D6E0F0;
  --surface-cool-blue-2: #C4D2E8;
  --surface-warm-pink: #F5D6D6;
  --surface-dark-4: #1B1A26;
  --surface-dark-5: #1E1C2A;

  /* ---- Browser chrome ---- */
  --chrome-red: #ff5f57;
  --chrome-yellow: #febc2e;
  --chrome-green: #28c840;
  --chrome-shadow: #3a3a4c;

  /* ---- Third-party brand accents ---- */
  --claude-orange: #D97757;

  /* ---- Brand colours at custom opacities ---- */
  --avail-pulse-mid: rgba(76,181,132,0.5);
  --avail-pulse-end: rgba(76,181,132,0);
  --craft-sage-glow: rgba(95,143,114,0.15);
  --accent-strong: rgba(74,103,209,0.25);
  --burn-mid: rgba(199,73,93,0.22);
  --craft-rust-soft: rgba(184,82,78,0.06);
}