/* ==========================================================================
   Design tokens · Denise Lee website
   The single source of truth for colour, type, space, radius and breakpoints.
   Components and pages reference these; they never introduce new raw values.
   ========================================================================== */
:root{
  /* Colour · light (default) */
  --color-ground:#F5F2EA;        /* page background, warm ivory */
  --color-surface:#EAE4D8;       /* alternating sections, stone */
  --color-surface-2:#DFD7C8;     /* deeper stone, reserved */
  --color-plate:#EEEAE0;         /* photo plate: one step darker than the ground, so the portrait reads as a surface, not a cut-out */
  --color-line:#D6CDBC;          /* hairlines, borders */
  --color-ink:#2A2E2B;           /* primary text, strong rules, primary button */
  --color-ink-2:#5A605B;         /* secondary text, labels (7.3:1 on ground) */
  --color-ink-3:#7D837D;         /* tertiary text, decorative only (4.1:1); never for body copy */
  --color-accent:#6F8A74;        /* sage: focus ring, hover borders */
  --color-accent-strong:#55705B; /* sage deep: eyebrows, links, italic word, figures, button hover */
  --color-accent-soft:#E6ECE5;   /* sage tint, reserved */
  --color-on-ink:#F5F2EA;        /* text on ink surfaces */

  /* Type */
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-text:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --weight-display:300;
  --weight-display-strong:400;
  --weight-text:400;
  --weight-text-medium:500;
  --weight-text-strong:600;

  --text-xs:12.5px;   /* eyebrows, labels (uppercase, tracked) */
  --text-sm:14px;     /* footer, notes */
  --text-base:16px;   /* dense body: cards, columns */
  --text-md:17.5px;   /* page body */
  --text-lg:20px;     /* lead paragraphs */
  --text-xl:24px;     /* h3, contact values */
  --text-2xl:clamp(24px,3vw,34px);     /* pull quote */
  --text-3xl:clamp(28px,3.6vw,40px);   /* h2 */
  --text-4xl:clamp(40px,5.6vw,68px);   /* h1 */
  --text-figure:32px;                  /* result figures, example labels */
  --text-figure-lg:48px;               /* result figures in the results strip */

  --leading-tight:1.04;
  --leading-snug:1.15;
  --leading-normal:1.45;
  --leading-text:1.65;
  --tracking-display:-0.01em;
  --tracking-caps:0.16em;
  --tracking-caps-sm:0.14em;

  /* Space (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:28px; --space-8:32px; --space-9:40px; --space-10:48px; --space-11:56px; --space-12:64px; --space-13:72px; --space-14:88px;
  --section-block:var(--space-14);          /* desktop section padding */
  --section-block-sm:var(--space-12);       /* phone section padding */
  --gutter:22px;
  --measure:62ch;
  --container:1120px;

  /* Shape */
  --radius-sm:2px;   /* portrait, images */
  --radius-md:6px;   /* tiles */
  --radius-pill:999px;
  --rule:1px solid var(--color-line);
  --rule-strong:1px solid var(--color-ink);

  /* Layers and motion */
  --z-header:10;
  --header-height:68px;
  --scroll-offset:90px;
}

/* Colour · dark. Follows the system setting; an explicit data-theme wins. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme:dark;
    --color-ground:#1B1C19; --color-plate:#EEEAE0; --color-surface:#262823; --color-surface-2:#30332D; --color-line:#3C403A;
    --color-ink:#EDE9DF; --color-ink-2:#C7C2B5; --color-ink-3:#9A9A8E;
    --color-accent:#9DB8A1; --color-accent-strong:#B7CDBA; --color-accent-soft:#283129; --color-on-ink:#1B1C19; }
}
:root[data-theme="dark"]{ color-scheme:dark;
  --color-ground:#1B1C19; --color-plate:#EEEAE0; --color-surface:#262823; --color-surface-2:#30332D; --color-line:#3C403A;
  --color-ink:#EDE9DF; --color-ink-2:#C7C2B5; --color-ink-3:#9A9A8E;
  --color-accent:#9DB8A1; --color-accent-strong:#B7CDBA; --color-accent-soft:#283129; --color-on-ink:#1B1C19; }

/* Breakpoints (for reference; CSS media queries cannot read custom properties)
   --bp-sm: 520px   roles list stacks
   --bp-md: 700px   section padding tightens, results strip stacks
   --bp-lg: 860px   two-column grids become one column, descriptor leaves the header */