/* ============================================================
   tokens.css — the single source of visual truth.
   Restyle the whole site by editing this file only.
   Mirrors §4 of portfolio-design-system.md ("Signal & Score").
   ============================================================ */

:root {
  /* ---- Color: warm linen — soft paper ground, navy ink, bronze accent ---- */
  --paper:        #F7F5F0;  /* warm linen — page background, easier on the eye than white */
  --surface:      #FFFFFF;  /* cards, media mats */
  --ink:          #22314F;  /* deep navy — headings, body */
  --ink-strong:   #16233F;  /* darkest navy — emphasis inside quotes and muted copy */
  --ink-soft:     #5B6A85;  /* secondary text, metadata */
  --accent:       #9BB0D0;  /* soft blue — large accents + graphics ONLY */
  --accent-soft:  #E7EBF3;  /* pale blue tint — fills, selection */
  --accent-deep:  #46618F;  /* true navy — text links, small interactive accents */
  --mist:         #A9B8D0;  /* soft blue-grey — secondary text on the footer band */
  --emphasis:     #7A5C26;  /* bronze — rare emphasis, max once per viewport */
  --emphasis-tint:#F2E9D8;  /* its tint — so the one emphasis chip reads as a chip */
  --line:         #DDD9D1;  /* warm hairline borders, dividers */

  /* the footer band + skip link: a deep panel against the light ground */
  --band:         #16233F;
  --on-band:      #E9EEF7;
  --on-band-soft: var(--mist);

  /* primary button: dark fill, light text — the one high-affordance control */
  --btn-fill:     #22314F;
  --btn-text:     #F7F5F0;


  /* ---- Type ---- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-note:    "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* scale: 1.25 ratio */
  --fs-xs:  0.8125rem;  /* 13 — mono captions, tags */
  --fs-md:  1rem;       /* 16 — body */
  --fs-lg:  1.25rem;    /* 20 — lede */
  --fs-xl:  1.5625rem;  /* 25 — h3 */
  --fs-2xl: 1.9375rem;  /* 31 — stats, h2 small */
  --fs-3xl: 2.4375rem;  /* 39 — h2 */
  --fs-4xl: 3.0625rem;  /* 49 */
  --fs-5xl: 3.8125rem;  /* 61 — h1 ceiling */

  --lh-body: 1.65;
  --lh-tight: 1.1;

  /* ---- Space ---- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --wrap-max: 1080px;
  --measure: 68ch;
  --section-pad: var(--s-9);   /* 96 desktop */

  /* ---- Shape ---- */
  --radius: 4px;        /* default */
  --radius-photo: 10px; /* photo cards */
  --radius-pill: 999px; /* tags */

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(22, 35, 63, 0.10);
  --shadow-2: 0 8px 32px rgba(22, 35, 63, 0.18);

  /* ---- Motion ---- */
  --t-micro: 160ms ease-out;
  --t-draw:  600ms;
}

/* Home music: plum ink, rose paper, and drifting stage-light colors. */
.music-section {
  --music-paper: #F1E5EE;
  --music-glow-rose: #EDB7C680;
  --music-glow-violet: #BBA4DB80;
  --music-glow-gold: #F6D7B380;
  --music-placeholder: #E6D6E8;
  --music-placeholder-alt: #F1D8DF;
  --music-reveal-time: 1400ms;
  --music-blend-height: 240px;
  --music-drift-time: 16s;
  --ink: #402840;
  --ink-soft: #70566E;
  --accent-deep: #794A75;
  --accent-soft: #E8D6E6;
  --surface: #FCF7FB;
  --line: #CBB4C9;
}

@media (max-width: 720px) {
  :root { --section-pad: var(--s-8); } /* 64 mobile */
}