/* ==========================================================================
   Madison Marino — design tokens
   The "stage": warm cream paper, dark ink, gold accent, MM neon spectrum.
   One light editorial art direction; colors are always defined here.
   ========================================================================== */

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/fonts/syne-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/bodoni-moda-latin.woff2") format("woff2");
}

:root {
  /* --- Base: the stage ---------------------------------------------------- */
  --void:      #f3ecdf;   /* primary cream background */
  --void-deep: #e8dece;   /* recessed beige sections */
  --panel:     #fbf7ef;   /* paper cards and chrome */
  --panel-2:   #eee4d5;   /* raised beige surfaces */
  --panel-3:   #e2d5c3;   /* hover surfaces / hairline fills */

  --text:      #211d24;   /* warm near-black ink */
  --text-dim:  #39343d;   /* slightly recessed body */
  --muted:     #625b65;   /* secondary text (AA on cream) */
  --faint:     #706872;   /* tertiary labels */

  --line:      rgba(33, 29, 36, 0.14);
  --line-soft: rgba(33, 29, 36, 0.08);
  --line-strong: rgba(33, 29, 36, 0.25);

  /* --- The range: MM signature spectrum ---------------------------------- */
  --range-pink:   #e62f86;
  --range-gold:   #c68a0a;
  --range-teal:   #00a394;
  --range-violet: #7048e8;
  --spectrum: linear-gradient(90deg, #e62f86, #c68a0a 34%, #00a394 67%, #7048e8);
  --spectrum-soft: linear-gradient(90deg,
    color-mix(in srgb, #e62f86 72%, transparent),
    color-mix(in srgb, #c68a0a 72%, transparent) 34%,
    color-mix(in srgb, #00a394 72%, transparent) 67%,
    color-mix(in srgb, #7048e8 72%, transparent));

  /* --- Everyday accent = gold -------------------------------------------- */
  --accent:     #b87c00;
  --accent-ink: #211d24;
  --accent-glow: color-mix(in srgb, #c68a0a 34%, transparent);

  /* --- One band per project (a slice of the range) ----------------------- */
  --a-lightbridge: #7048e8;  /* violet — live instrument */
  --a-classifind:  #008f83;  /* teal   — music app */
  --a-butterfly:   #d92778;  /* pink   — installation */
  --a-orbricks:    #1677d2;  /* blue   — game */
  --a-iunu:        #4b8d2d;  /* green  — data story */
  --a-popcorn:     #d95d25;  /* orange — social app */
  --a-hateends:    #a96f00;  /* gold   — impact web */
  --a-calin:       #a96f00;  /* amber  — brand system */

  /* Per-page band accent (overridden on case studies). Defaults to gold. */
  --band: var(--accent);
  --band-ink: var(--accent-ink);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Syne", "Inter", system-ui, sans-serif;
  --font-serif:   "Bodoni Moda", Didot, "Bodoni MT", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Fluid type scale */
  --fs-mono:   clamp(11px, 0.72rem + 0.1vw, 13px);
  --fs-body:   clamp(15px, 0.9rem + 0.2vw, 17px);
  --fs-lead:   clamp(18px, 1rem + 0.6vw, 23px);
  --fs-h3:     clamp(19px, 1.05rem + 0.6vw, 26px);
  --fs-h2:     clamp(28px, 1.6rem + 1.7vw, 46px);
  --fs-h1:     clamp(34px, 1.7rem + 4vw, 84px);
  --fs-display: clamp(40px, 14vw, 240px); /* viewport-scale wordmark (one word per line) */

  /* --- Space / layout ---------------------------------------------------- */
  --wrap:   1200px;
  --wrap-narrow: 780px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius:    18px;
  --radius-lg: 26px;
  --radius-sm: 10px;
  --pill: 999px;

  --header-h: 68px;

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 620ms;

  /* Shared-signal lerp constants are documented in assets/js/signal.js:
     signal lerp 0.10, per-letter 0.15, velocity decay 0.94, DPR cap 2. */

  --shadow-1: 0 2px 8px rgba(65, 48, 30, 0.12);
  --shadow-2: 0 24px 60px -28px rgba(65, 48, 30, 0.3);
  --shadow-3: 0 40px 90px -40px rgba(65, 48, 30, 0.38);
}