/* Clement site tokens, round 6, LOCKED by Kenneth (review 12, 2026-10-18 17:45 ET, DEC-3916). Generated 2026-10-18 17:49 EDT by
   company/wip/clement/brand/r6/converge/tools/c6.py; do not hand-edit. Drop-in for clement-site/tokens.css:
   it sets the 25 names the site reads, plus --s2 to --s7 (the site's styles also read them), plus one new name,
   --ink-soft, for the two-tone hero headline.
   Light mode only (the saved dark mode, espresso, is in clement.css). Page: light oat (E01's oat, two small steps lighter).
   All running text is the one ink: --ink-2 equals --ink; --ink-3 is a tiny step off it for captions.
   Not read by the site yet: the accent orange O05 #FF783A for the one main button (text on it: --ink), and the paper
   grain texture (textures/paper-grain.png). Both are in clement.css. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/Figtree-latin.woff2") format("woff2"); }

:root {
  --bg: #FCF6EC;          /* page */
  --bg-2: #D6E8CD;        /* alternate band: pastel green (sage) */
  --card: #F7F1E7;        /* cards on the page */
  --ink: #1E1814;         /* all running text (16.3:1 on bg) */
  --ink-2: #1E1814;       /* secondary text: the same ink (hierarchy by size and weight) */
  --ink-3: #29231F;       /* captions and quiet labels: a tiny step off the ink (14.4:1 on bg, 12.0:1 or more on every band and card) */
  --ink-soft: #6E6862;    /* ONLY the second phrase of the hero headline (two-tone), never body text (5.1:1 on bg) */
  --line: #DFD9D0;        /* hairlines */
  --line-2: #C2BCB4;      /* dashed placeholders */
  --bubble-me: #4D4741;   /* the person typing */
  --btn-hover: #FFFFFF;   /* button on hover */
  --bubble-it: #FDE0C8;   /* Clement: pastel orange (peach) */
  --on-dark: #F7F0E2;     /* text on the dark bubble and dark buttons: soft cream */

  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* the type scale: four sizes (title is the body size; weight, not size, sets it apart) */
  --fs-display: clamp(38px, 2.04vw + 30.7px, 60px);   /* H1 */
  --fs-heading: clamp(28px, 1.11vw + 24.0px, 40px);   /* section H2 */
  --fs-title: var(--fs-body);
  --fs-body: 16px;
  --fs-small: 14px;

  /* spacing: an 8px scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --section: clamp(56px, 2vw + 40px, 72px);
  --wrap: 1200px;
  --gutter: clamp(24px, 4vw, 56px);
  --radius: 20px;
  --radius-s: 14px;
}
@media (max-width: 759px) { :root { --radius: 16px; --radius-s: 12px; } }
@media (min-width: 1800px) { :root { --wrap: 1320px; } }
@media (min-width: 2400px) { :root { --wrap: 1600px; --fs-display: 80px; --fs-heading: 54px; --fs-body: 18px; --fs-small: 15px; } }
@media (min-width: 3000px) { :root { --wrap: 1880px; --fs-display: 96px; --fs-heading: 64px; --fs-body: 20px; --fs-small: 16px; } }

/* Added by the site build (W4b, 2026-10-18). site-tokens.css does not carry these yet, so the values are copied
   as they are from company/wip/clement/brand/r6/converge/tokens/clement.css:
   the accent orange O05 (one main button per view, and the one small dot per screen; ink text on it), Clement's
   pastel orange as the one peach band, and the paper grain (textures/paper-grain.png re-saved as lossless WebP:
   pixel-identical, about half the bytes). */
:root {
  --accent: #FF783A;      /* --clement-orange */
  --on-accent: #1E1814;   /* --clement-on-orange */
  --bg-3: #FDE0C8;        /* --clement-peach: the one peach band */
  --texture: url("img/paper-grain.webp");  /* --clement-texture */
  --texture-size: 128px;  /* --clement-texture-size */
}

/* Added after Kenneth's review 13 (2026-10-18): chats are never orange (light grey and ink, on a card that stands out
   from the page), and the huge footer wordmark sits in a lighter tone so the bottom of the page is not heavy.
   Round 2 of that review: the footer a touch darker than the page, and the wordmark one step darker (still well off the ink).
   --bubble-it overrides the locked value above on his ruling. Contrast: ink on --bubble-it 14.5:1, ink on --foot-bg 15.0:1;
   --wordmark is a logo. */
:root {
  --bubble-it: #ECE9E4;   /* Clement's chat bubble: light warm grey, ink text */
  --chat-bg: #FFFEFB;     /* every chat card and the demo screen: soft white with the hairline */
  --foot-bg: #F3ECE0;     /* the footer: a touch deeper than the page */
  --wordmark: #948D85;    /* the footer wordmark: a warm grey between #A39C94 and --ink-soft (2.8:1 on --foot-bg; a logo, not text) */
}

/* The demo laptop's screen runs in the saved espresso dark mode (Kenneth, 2026-10-19: "the computer imagery halfway down
   ... in the darkmode - chocolate vibe"); the rest of the page stays light. Values copied as they are from
   company/wip/clement/brand/r6/converge/tokens/clement.css ([data-theme="dark"]). Pairs from its CONTRAST.md: cream on
   the screen 14.4:1, caption cream on the screen 11.8:1, cream on the person's bubble 8.0:1, cream on Clement's bubble
   10.2:1, cream on the composer (card) 12.3:1. */
:root {
  --dk-paper: #281E17;     /* --clement-paper (dark): the screen */
  --dk-card: #352A23;      /* --clement-card (dark): the composer */
  --dk-ink: #F7F0E2;       /* --clement-ink (dark): all text on the screen */
  --dk-ink-3: #E2DBCE;     /* --clement-ink-caption (dark): small labels */
  --dk-line: #453B33;      /* --clement-line (dark) */
  --dk-line-2: #625950;    /* --clement-line-strong (dark) */
  --dk-bubble-me: #52463F; /* --clement-bubble-person (dark) */
  --dk-bubble-it: #42372F; /* Clement's chat bubble in dark (CONTRAST.md; the same value as --clement-hover) */
}