/*
 * Round 3 system: tokens. The one source of colour, type, space and motion
 * for every one of Laura's sites (brief sections 5 and 6). Colours are
 * light-dark() pairs, so the platform's theme control switches every one.
 *
 * The build stamps <html data-site="<key>"> on every page (hub, organise,
 * simplify, juggle, declutter, stage, style, celebrate, design, share,
 * gifttrix), and the rules at the foot of this file give each site its
 * ground, ink and accent (brief 5.4). A site's own assets/css/site.css may
 * set the semantic names (--ground, --accent and the rest) further; it never
 * changes the family or area names. Every pair is in brief 5.2 to 5.4, and
 * docs/plan/panel/round3/tools/contrast.mjs recomputes them.
 */
:root {
  color-scheme: light dark;

  /* ---------- the family (5.2): warm rice paper, dusk washi ---------- */
  --paper: light-dark(#F7F2E8, #26221D);
  --paper-raised: light-dark(#FCF9F2, #302B25);
  --paper-tint: light-dark(#EFE8DA, #2E2924);
  --ink-family: light-dark(#1F1B16, #EFE8DC);
  --ink-family-2: light-dark(#5A5045, #C4B9A8);
  --boundary-family: light-dark(#8A7E6E, #8F8473);
  --call: light-dark(#A84A12, #F0913F);
  --call-deep: light-dark(#8E3D0E, #F5A45C);
  --call-ink: light-dark(#FCF9F2, #1A0E04);
  --seal-orange: #ED802B;
  /* a hairline that carries no meaning: decoration only, never a control's edge */
  --hair-family: light-dark(#DCD3C3, #474037);

  /* ---------- the nine areas (5.3): ink decorates, say carries text ---------- */
  --ink-organise: light-dark(#ED802B, #F09A50);   --say-organise: light-dark(#9A4307, #F6B47A);   --wash-organise: light-dark(#F9E2CC, #594330);
  --ink-simplify: light-dark(#E2B21C, #EBC23F);   --say-simplify: light-dark(#735600, #F0CF5E);   --wash-simplify: light-dark(#F7ECC9, #584C2C);
  --ink-juggle: light-dark(#6AA52E, #8CC452);     --say-juggle: light-dark(#3C6A12, #A6D576);     --wash-juggle: light-dark(#DFE9CC, #434D30);
  --ink-declutter: light-dark(#3E9E7E, #5CC29F);  --say-declutter: light-dark(#1F6B52, #7DD3B4);  --wash-declutter: light-dark(#D6E8DC, #384C41);
  --ink-stage: light-dark(#2A93A6, #4DBACD);      --say-stage: light-dark(#136170, #7ACFDD);      --wash-stage: light-dark(#D2E5E4, #354A4C);
  --ink-style: light-dark(#34479A, #8698E0);      --say-style: light-dark(#2C3D86, #A9B6EB);      --wash-style: light-dark(#D4D6E2, #414350);
  --ink-celebrate: light-dark(#7B3FA6, #B285D6);  --say-celebrate: light-dark(#6A2F94, #C7A3E3);  --wash-celebrate: light-dark(#E2D5E4, #4B3F4E);
  --ink-design: light-dark(#C42A86, #E46BB2);     --say-design: light-dark(#9E1C6B, #EE93C7);     --wash-design: light-dark(#F1D0DE, #563946);
  --ink-share: light-dark(#D63447, #EE6B79);      --say-share: light-dark(#A81E31, #F39AA4);      --wash-share: light-dark(#F4D2D1, #583939);
  --ink-apps: var(--ink-family);                  --say-apps: var(--ink-family);                  --wash-apps: var(--paper-tint);

  /* ---------- semantic names: what components read ---------- */
  --ground: var(--paper);
  --raised: var(--paper-raised);
  --tint: var(--paper-tint);
  --ink: var(--ink-family);
  --ink-2: var(--ink-family-2);
  --boundary: var(--boundary-family);
  --hair: var(--hair-family);
  --accent: var(--say-organise);         /* text-capable: links in an area colour, lit labels */
  --area-ink: var(--seal-orange);        /* decoration: the site's seal and pattern colour */
  --area-wash: var(--wash-organise);
  --area-pat: url(#pat-organise);
  --focus: var(--ink);
  /* the pattern woven into a page (9.2): grounds at a whisper, marks a little stronger.
     Plain numbers, set again for dark below: light-dark() takes only colours and images. */
  --weave-ground: .07;
  --weave-mark: .42;

  /* ---------- type (6) ---------- */
  --face-head: "Shippori Mincho", "Shippori Fallback", "Times New Roman", serif;
  --face-note: "Klee One", "Klee Fallback", "Segoe Print", "Comic Sans MS", sans-serif;
  --face-caps: "Funnel Display", "Funnel Display Fallback", "Segoe UI", Roboto, Arial, sans-serif;
  --face-text: "Funnel Sans", "Funnel Sans Fallback", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --face-style: "Gloock", "Gloock Fallback", "Times New Roman", serif;
  --face-organise: "Instrument Sans", "Funnel Sans", Arial, sans-serif;
  --face-celebrate: "Instrument Serif", "Instrument Serif Fallback", "Times New Roman", serif;
  --face-display: var(--face-head);       /* a site's headline voice: Style, Organise and Celebrate set their own */
  --display-weight: 600;                  /* the weight the display face is drawn in; a site whose face has one weight sets it */
  --step-hero: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
  --step-display: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem);
  --step-1: clamp(1.55rem, 1.2rem + 1.2vw, 2.25rem);
  --step-2: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --step-0: 1.0625rem;
  --step-small: 0.9375rem;
  --step-quiet: 0.8125rem;
  --track-caps: 0.24em;
  --measure: 66ch;

  /* ---------- space and shape ---------- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem;
  --gutter: clamp(1.1rem, 0.6rem + 2.2vw, 2.75rem);
  --page-max: 76rem;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --target: 44px;
  --header-h: 72px;
  --bar-h: 64px;

  /* ---------- motion (brief 11.2) ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-turn: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --spring: linear(0, 0.054, 0.181, 0.338, 0.497, 0.642, 0.765, 0.861, 0.932, 0.981, 1.013, 1.03, 1.037, 1.038, 1.035, 1.029, 1.023, 1.017, 1.012, 1.007, 1);
  --t-press: 120ms;
  --t-swap: 180ms;
  --t-slide: 240ms;
  --t-sheet: 240ms;
  --t-turn: 420ms;
  --t-open: 520ms;
  --t-stamp: 260ms;

  /* the platform's handoff layer stands down: passage.js draws the passage */
  --handoff-colour: transparent;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
/* The numbers that follow the theme: dark by choice, or by the system with no choice made. */
html[data-theme="dark"] { --weave-ground: .05; --weave-mark: .34; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --weave-ground: .05; --weave-mark: .34; } }
@media (max-width: 719px) { :root { --header-h: 60px; } }

/* ---------- each site's ground and voice (5.4) ---------- */
html[data-site="organise"] {
  --ground: light-dark(#F8F0E5, #2A231D); --raised: light-dark(#FCF7F0, #342B24); --tint: light-dark(#F4E2D0, #3A2C20);
  --ink-2: light-dark(#5A4A3C, #C9B9A6);
  --accent: var(--say-organise); --area-ink: var(--ink-organise); --area-wash: var(--wash-organise); --area-pat: url(#pat-organise);
  --face-display: var(--face-organise);
}
html[data-site="simplify"] {
  --ground: light-dark(#F6EFDE, #2E281E); --raised: light-dark(#FBF7ED, #373126); --tint: light-dark(#EEE5CF, #3F3726);
  --accent: var(--say-simplify); --area-ink: var(--ink-simplify); --area-wash: var(--wash-simplify); --area-pat: url(#pat-simplify);
}
html[data-site="juggle"] {
  --ground: light-dark(#F0EEDF, #2A281F); --raised: light-dark(#F8F7ED, #343127); --tint: light-dark(#E7E4D0, #363728);
  --accent: var(--say-juggle); --area-ink: var(--ink-juggle); --area-wash: var(--wash-juggle); --area-pat: url(#pat-juggle);
}
html[data-site="declutter"] {
  --ground: light-dark(#EEEEE3, #282822); --raised: light-dark(#F7F7EF, #32312A); --tint: light-dark(#E4E4D4, #32372F);
  --accent: var(--say-declutter); --area-ink: var(--ink-declutter); --area-wash: var(--wash-declutter); --area-pat: url(#pat-declutter);
}
html[data-site="stage"] {
  --ground: light-dark(#EDEDE5, #282824); --raised: light-dark(#F7F6F0, #31312C); --tint: light-dark(#E3E3D7, #313633);
  --accent: var(--say-stage); --area-ink: var(--ink-stage); --area-wash: var(--wash-stage); --area-pat: url(#pat-stage);
}
html[data-site="style"] {
  --ground: light-dark(#F5F1EA, #22232B); --raised: light-dark(#FBF8F3, #2B2C36); --tint: light-dark(#E6E7F0, #2A2D40);
  --ink: light-dark(#1C1C26, #ECEAF0); --ink-2: light-dark(#4F4E5E, #BDBACB);
  --accent: var(--say-style); --area-ink: var(--ink-style); --area-wash: var(--wash-style); --area-pat: url(#pat-style);
  --face-display: var(--face-style);
  --display-weight: 400;                /* Gloock has one weight: never a synthesised bold */
}
html[data-site="celebrate"] {
  --ground: light-dark(#F7F0EE, #272129); --raised: light-dark(#FCF8F6, #312A34); --tint: light-dark(#EDE2F0, #33283A);
  --ink: light-dark(#221A24, #F0E8EF); --ink-2: light-dark(#5B4C5E, #C7B6C6);
  --accent: var(--say-celebrate); --area-ink: var(--ink-celebrate); --area-wash: var(--wash-celebrate); --area-pat: url(#pat-celebrate);
  --face-display: var(--face-celebrate);
  --display-weight: 400;                /* Instrument Serif has one weight too */
}
html[data-site="design"] {
  --ground: light-dark(#F4E8E3, #2E2523); --raised: light-dark(#FBF4EF, #372E2B); --tint: light-dark(#EDE1D7, #3E2F31);
  --accent: var(--say-design); --area-ink: var(--ink-design); --area-wash: var(--wash-design); --area-pat: url(#pat-design);
}
html[data-site="share"] {
  --ground: light-dark(#F5E8E0, #2E2521); --raised: light-dark(#FBF4EE, #382E28); --tint: light-dark(#EEE2D5, #3F2F2C);
  --accent: var(--say-share); --area-ink: var(--ink-share); --area-wash: var(--wash-share); --area-pat: url(#pat-share);
}
html[data-site="gifttrix"] {
  --accent: var(--ink-family); --area-ink: var(--ink-family); --area-wash: var(--paper-tint); --area-pat: url(#pat-apps);
}