/* Round 5 designer tokens: each direction's type and colour (kept in step with a.css / b.css / c.css), then the map from
   site tokens onto the designer's own names (flow.css). A's designer is dark, like its stage. */
.dir-a.design{
  --font-display:"Mona Sans",-apple-system,"Helvetica Neue",Arial,sans-serif; --font-body:"Mona Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fs-1:clamp(14px,13.6px + .1vw,15px); --fs-2:clamp(17px,16.6px + .1vw,18px); --fs-3:clamp(19px,17.6px + .4vw,23px);
  --fs-4:clamp(24px,19.5px + 1.15vw,34px); --fs-5:clamp(34px,23px + 2.9vw,68px); --fs-6:clamp(44px,27px + 4.4vw,100px);
  --w-1:400; --w-2:600; --w-3:800; --display-track:-.035em;
  --bg:#111111; --surface:#1C1C1C; --text:#F4F3F0; --muted:#A9A7A2; --line:#303030;
  --accent:#C8402B; --accent-hover:#A93420; --accent-text:#FFFFFF; --mark-top:#E04A2F;
  --stage-top:#1B1B1B; --stage-bottom:#0B0B0B; --radius:10px; --btn-radius:999px;
  color-scheme:dark;
}
.dir-a.design[data-season="holiday"]{--accent:#1E6A48; --accent-hover:#175439}
.dir-b.design{
  --font-display:"Big Shoulders","Arial Narrow",Impact,sans-serif; --font-body:"Host Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fs-1:clamp(14px,13.6px + .1vw,15px); --fs-2:clamp(17px,16.6px + .1vw,18px); --fs-3:clamp(20px,18.5px + .4vw,24px);
  --fs-4:clamp(30px,24px + 1.4vw,44px); --fs-5:clamp(56px,30px + 6.6vw,120px); --fs-6:clamp(76px,28px + 13vw,232px);
  --w-1:400; --w-2:600; --w-3:800; --display-track:-.005em;
  --bg:#FFFFFF; --surface:#F3F3F1; --text:#111111; --muted:#5D5D5A; --line:#E5E5E2;
  --accent:#111111; --accent-hover:#D93A1E; --accent-text:#FFFFFF; --mark-top:#C8402B;
  --stage-top:#FFFFFF; --stage-bottom:#ECECE9; --radius:4px; --btn-radius:999px;
}
.dir-b.design[data-season="holiday"]{--accent:#1F5C3F; --accent-hover:#174A32}
.dir-c.design{
  --font-display:"Funnel Display",-apple-system,"Helvetica Neue",Arial,sans-serif; --font-body:"Funnel Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fs-1:clamp(14px,13.6px + .1vw,15px); --fs-2:clamp(17px,16.6px + .1vw,18px); --fs-3:clamp(20px,18.5px + .4vw,24px);
  --fs-4:clamp(26px,21px + 1.3vw,36px); --fs-5:clamp(44px,30px + 3.6vw,88px); --fs-6:clamp(64px,17.4vw + 2px,200px);
  --w-1:400; --w-2:600; --w-3:800; --display-track:-.035em;
  --bg:#FFFFFF; --surface:#F3F3F3; --text:#121212; --muted:#5B5B5B; --line:#E4E4E4;
  --accent:#121212; --accent-hover:#3A3A3A; --accent-text:#FFFFFF; --mark-top:#C8402B;
  --stage-top:#FFFFFF; --stage-bottom:#EAEAEA; --radius:20px; --btn-radius:999px;
}
.dir-c.design[data-season="holiday"]{--accent:#B3261E; --accent-hover:#951F18}

/* site tokens → designer tokens */
.design{
  --font-head:var(--font-display); --head-w:var(--w-3); --head-track:var(--display-track); --lh-head:1.02;
  --fg:var(--text); --surface-2:var(--surface); --accent-fg:var(--accent-text); --accent-press:var(--accent-hover);
  --accent-soft:color-mix(in srgb,var(--text) 9%,transparent);
  --display:var(--font-display); --d-wt:var(--w-3); --d-case:none; --d-track:var(--display-track); --d-lh:1.02;
  --label:var(--font-body); --l-wt:var(--w-2); --l-track:0; --body:var(--font-body); --b-wt:var(--w-1); --b-size:var(--fs-2);
  --radius-lg:var(--radius); --radius-pill:var(--btn-radius); --shadow:0 18px 40px -22px rgba(0,0,0,.35);
  --btn-case:none; --btn-track:0; --btn-font:var(--font-body); --btn-wt:var(--w-2); --title-max:16ch;
}
.design body{background:var(--bg);color:var(--text)}
.dir-a.design .fl-title{font-stretch:125%}
.dir-b.design .fl-title{font-variation-settings:"opsz" 72}
/* B and C have giant display steps (their fs-5 is a page-statement size), so the tool's titles use fs-4 */
.dir-b.design .fl-title,.dir-c.design .fl-title,.dir-b.design .fl[data-step] .fl-title,.dir-c.design .fl[data-step] .fl-title{font-size:var(--fs-4)}