/* Stanquette design tokens — the single source of truth for colour, type,
   space and motion. Nothing in here selects anything; every other stylesheet
   reads from it. Load this first. */

:root {
  /* --- Surfaces --- */
  --sand: #f2e7d3;
  --sand-deep: #e7d7b9;
  --sand-press: #d9c7a4;
  --cream: #fcf6ea;
  --paper: #fff;

  /* --- Marks --- */
  --ink: #17130f;
  --ink-soft: #5c5147;
  --ink-hover: #332b23;
  --ink-press: #000;

  --orange: #d9531e;
  --orange-tint: #efa23f;
  --orange-deep: #a83a0f;
  --orange-hover: #c24514;
  --orange-press: #8f3410;

  /* Washes of the accent — the destructive button's fill at rest and pressed */
  --orange-wash: #fbeee8;
  --orange-wash-press: #efc9ba;

  /* --- Inert / disabled --- */
  --plate-muted: #efe9dc;
  --plate-disabled: #e3d8c2;
  --line-muted: #c9bfae;
  --text-muted: #a9a093;
  --text-placeholder: #8e8478;

  /* Secondary copy on a dark or a dune band keeps its contrast without going
     to full cream — these are the two counterparts to --ink-soft. */
  --ink-soft-on-ink: #c9bfb2;
  --ink-soft-on-dune: #4a4038;
  --text-muted-on-ink: #9a9086;

  /* --- Rules. Heavy opens a section, hair separates rows within it. --- */
  --rule-heavy: 2px;
  --rule-hair: color-mix(in srgb, var(--ink) 20%, transparent);
  --rule-hair-on-ink: color-mix(in srgb, var(--cream) 22%, transparent);

  /* --- Lift ---
     A pressable thing casts a warm shadow tinted with a burnt version of its
     own colour — never black, and it never moves the element. */
  --lift-primary: 0 4px 12px #8a2e0a66;
  --lift-primary-hover: 0 6px 16px #8a2e0a73;
  --lift-primary-press: 0 1px 4px #8a2e0a4d;
  --lift-secondary: 0 4px 12px #2a1b0f59;
  --lift-secondary-hover: 0 6px 16px #2a1b0f66;
  --lift-secondary-press: 0 1px 4px #2a1b0f40;
  --lift-quiet: 0 3px 10px #5c514733;
  --lift-quiet-hover: 0 5px 14px #5c51473d;
  --lift-quiet-press: 0 1px 4px #5c514726;
  --lift-destructive: 0 3px 10px #8a2e0a33;
  --lift-destructive-hover: 0 5px 14px #8a2e0a40;
  --lift-destructive-press: 0 1px 4px #8a2e0a26;

  /* --- Type families ---
     Four faces, each with one job: display sets headings, body sets prose,
     label sets anything mechanical, mono sets anything you copy or type. */
  --font-display: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Crimson Text", Georgia, "Times New Roman", serif;
  --font-label: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale ---
     Fluid from hero down to lede; fixed below that, where scaling with the
     viewport only makes small text unreadable on a phone. */
  --step-hero: clamp(2.5rem, 1rem + 7vw, 5.5rem);
  --step-display: clamp(2.125rem, 1.2rem + 4vw, 3.375rem);
  --step-section: clamp(1.75rem, 1.1rem + 3vw, 2.875rem);
  --step-subsection: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
  --step-name: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
  --step-title: clamp(1.15rem, 1.05rem + 0.4vw, 1.3125rem);
  --step-lede: clamp(1.125rem, 1rem + 0.7vw, 1.3125rem);
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --step-ui: 1rem;
  --step-small: 0.9375rem;
  --step-fine: 0.875rem;
  --step-label: 0.6875rem;
  --step-badge: 0.625rem;

  /* --- Weights ---
     Archivo Black and Crimson Text each ship one usable weight, so the only
     real choice is between running prose and semibold label text. */
  --weight-regular: 400;
  --weight-semibold: 600;

  /* --- Tracking ---
     Display sets slightly open; labels set wide. Nothing sits in between: if
     text needs tracking it is mechanical, and mechanical text is a label. */
  --track-display: 0.005em;
  --track-button: 0.123em;
  --track-caps: 0.18em;
  --track-eyebrow: 0.2em;
  --track-legal: 0.16em;

  /* --- Leading --- */
  --leading-hero: 1.05;
  --leading-display: 1.08;
  --leading-heading: 1.15;
  --leading-title: 1.25;
  --leading-snug: 1.4;
  --leading-ui: 1.45;
  --leading-control: 1.5;
  --leading-body: 1.6;

  /* --- Measure --- */
  --measure-wide: 75rem;
  --measure-prose: 42rem;
  --measure-lede: 38rem;

  /* --- Space --- */
  --gutter: clamp(1.25rem, 5vw, 7.5rem);
  --band-pad: clamp(3rem, 8vw, 5.25rem);

  /* --- Motion ---
     One duration and one curve. State is carried by colour and shadow only,
     so nothing needs anything longer or springier than this. */
  --tempo: 120ms;
  --tempo-slow: 140ms;
  --ease: ease;

  /* --- Controls --- */
  --control-height: 3.125rem;
  --control-border: 1.5px;

  /* --- Code ---
     A code block is an ink slab. Syntax colour stays deliberately thin: four
     tones, enough to separate a comment from a string from a constant, and
     not one hue more than the rest of the site allows itself. */
  --code-plate: var(--ink);
  --code-text: #ede4d6;
  --code-comment: #8b8175;
  --code-keyword: var(--orange-tint);
  --code-literal: var(--sand-deep);
}