/* ==========================================================================
   Design tokens: the only colours, sizes and timings components may use.
   Warm paper system (brief, 25 Oct 2026). Every grey is ink (or cream)
   at a lower opacity; there are no other greys.
   ========================================================================== */

:root {
  /* ---------- Colour: paper, ink and the plum accent; cream and graphite are their light and dark ---------- */
  --paper: #F3EEE6;      /* page and light sections */
  --ink: #1D1816;        /* text and rules: warm near-black, never #000 */
  --ground: #2E1A22;     /* the plum: hero and footer ground, the intro's jack */
  --cream: #F5EDE2;      /* text on plum; snapshot frames; the cord */
  --graphite: #141110;   /* nav bar, dark buttons, active states */

  --ink-rgb: 29 24 22;
  --cream-rgb: 245 237 226;

  /* Ink on paper */
  --ink-06: rgb(var(--ink-rgb) / .06);   /* empty image slot while loading */
  --ink-07: rgb(var(--ink-rgb) / .07);   /* highlighter */
  --ink-09: rgb(var(--ink-rgb) / .09);   /* dashed guides */
  --ink-15: rgb(var(--ink-rgb) / .15);   /* hairlines */
  --ink-30: rgb(var(--ink-rgb) / .30);   /* underline */
  --ink-40: rgb(var(--ink-rgb) / .40);   /* the intro cable's edges */
  --ink-55: rgb(var(--ink-rgb) / .55);   /* labels */
  --ink-62: rgb(var(--ink-rgb) / .62);
  --ink-65: rgb(var(--ink-rgb) / .65);   /* intro lines, process body */
  --ink-75: rgb(var(--ink-rgb) / .75);   /* body */

  /* Cream on ground */
  --cream-15: rgb(var(--cream-rgb) / .15);
  --cream-30: rgb(var(--cream-rgb) / .30);   /* the composer's writing line */
  --cream-36: rgb(var(--cream-rgb) / .36);
  --cream-40: rgb(var(--cream-rgb) / .40);
  --cream-55: rgb(var(--cream-rgb) / .55);
  --cream-62: rgb(var(--cream-rgb) / .62);   /* live message preview */
  --cream-72: rgb(var(--cream-rgb) / .72);

  --hairline: 1px solid var(--ink-15);
  --hairline-dark: 1px solid var(--cream-15);

  /* Shadows: warm brown, long, pulled in. Never grey. */
  --shadow-card: 0 24px 46px -24px rgba(40, 18, 12, .55);
  --shadow-tile: 0 18px 40px -26px rgba(40, 18, 12, .6);

  /* ---------- Type: each font has one job ---------- */
  --font-display: "Faculty Glyphic", Georgia, serif;          /* name, step titles, footer line */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;  /* everything you read */
  --font-mono: "DM Mono", ui-monospace, monospace;             /* tiny labels only */

  --fs-hero: clamp(2.75rem, 4.6vw, 5.25rem);                  /* ~66px at 1440 */
  --fs-hero-sub: clamp(1.0625rem, 0.6rem + 1.25vw, 1.625rem);  /* ~26px at 1440 */
  --fs-statement: clamp(1.25rem, 0.654rem + 2.545vw, 1.875rem);/* 20px -> 30px at 768 */
  --fs-lead: 1.25rem;                                         /* 20px intro lines */
  --fs-step: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);           /* 30px step titles */
  --fs-body: 1rem;
  --fs-body-l: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);         /* 18px process body */
  --fs-small: 0.9375rem;
  --fs-fine: 0.75rem;                                         /* 12px fine print */
  --fs-label: 0.8125rem;                                      /* 13px section labels */
  --fs-tag: 0.75rem;                                          /* 12px strips and tags: never smaller */
  --fs-button: 0.75rem;                                       /* 12px mono buttons */

  --measure-content: 52rem;   /* 832px reading measure, columns 4-12 */
  --measure-body: 40rem;

  /* ---------- Space: 4px base ---------- */
  --s4: 4px;   --s8: 8px;   --s12: 12px;  --s16: 16px;  --s24: 24px;
  --s32: 32px; --s40: 40px; --s48: 48px;  --s64: 64px;  --s96: 96px;
  --s144: 144px;

  --section-y: var(--s96);
  --edge: 24px;
  --gap: var(--s16);
  --nav-top: 16px;

  /* ---------- Shape ---------- */
  --r-img: 2px;
  --r-card: 3px;
  --r-btn: 4px;

  /* ---------- Layers ---------- */
  --z-raised: 10;
  --z-menu: 800;
  --z-nav: 900;
  --z-intro: 8900;
  --z-grain: 9000;
  --z-cursor: 9500;

  /* ---------- Motion: one curve everywhere ---------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-micro: .25s;
  --dur-ui: .5s;
  --dur-reveal: 1s;
}

@media (min-width: 560px) {
  :root { --nav-top: 32px; }
}
@media (min-width: 768px) {
  :root {
    --section-y: var(--s144);
    --edge: max(64px, calc((100vw - 1760px) / 2));
  }
}
@media (min-width: 1024px) {
  :root { --gap: var(--s32); }
}