/* Static & Signal design tokens · v0.1 · 2026-10-14
   Source of truth: the approved homepage working master (v6) and Decision Log D-40, D-42, D-43, D-46, D-47.
   Status per group is marked [APPROVED] (taken from an approved decision or the approved homepage)
   or [PROVISIONAL] (Claude's production default, not yet reviewed by Jess). */

/* Fonts: load only these three families (D-46). All SIL Open Font License 1.1.
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@900&family=Instrument+Serif&family=Chivo+Mono:wght@400;500&display=swap"> */

:root{
  /* ---------- Color [APPROVED as used on the homepage; D-37 accent still logged as Exploring] ---------- */
  --ss-black:#000000;
  --ss-white:#FFFFFF;
  --ss-pink:#FF2E88;            /* the one accent: display type, ampersand, CTA wipe, arrows */
  --ss-pink-text-on-white:#C2185B; /* small pink text on white only (#FF2E88 on white is 3.5:1) */
  --ss-on-pink:#000000;         /* text on a pink fill is always black (6.0:1); never white (3.5:1) */
  --ss-grey-on-black:#BDBDBD;   /* secondary text on black, 11.18:1 (D-40) */
  --ss-grey-on-white:#666666;   /* secondary text on white, 5.74:1 */
  --ss-line-on-black:rgba(255,255,255,.22);
  --ss-line-on-white:rgba(0,0,0,.16);
  --ss-disabled:#8C8C8C;        /* [PROVISIONAL] disabled CTA; not for informational text */

  /* ---------- Type families [APPROVED D-46] ---------- */
  --ss-font-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; /* weight 900 only */
  --ss-font-serif:"Instrument Serif",Georgia,serif;                         /* weight 400 */
  --ss-font-mono:"Chivo Mono",ui-monospace,Menlo,monospace;                 /* 400 and 500, ligatures off */
  --ss-font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* utility stack, not a brand face */

  /* ---------- Reading roles [APPROVED D-57: each font has a job] ---------- */
  --ss-font-read-short:var(--ss-font-serif); /* FAQ questions, package and card descriptions: 20px and up */
  --ss-font-read-list:var(--ss-font-mono);   /* lists, steps, details, labels, CTAs */
  --ss-font-read-long:var(--ss-font-ui);     /* long answers, paragraphs and form fields only */

  /* ---------- Type settings [APPROVED: values from the homepage] ---------- */
  --ss-display-lh:.86;          /* hero headline (.86), section heads .88 */
  --ss-display-track:.002em;
  --ss-wordmark-track:.005em;
  --ss-lede-lh:1.16;            /* Instrument Serif lede */
  --ss-body-lh:1.55;            /* system UI reading copy */
  --ss-short-lh:1.15;           /* Instrument Serif questions (1.1) and descriptions (1.2) [D-57] */
  --ss-list-track:.03em;        /* Chivo Mono list items, uppercase [D-57] */
  --ss-step-lh:1.6;             /* Chivo Mono step text, sentence case [D-57] */
  --ss-label-track:.16em;       /* Chivo Mono section labels, uppercase */
  --ss-nav-track:.06em;         /* Chivo Mono nav and links, uppercase */
  --ss-cta-track:.03em;         /* Start a Project button, Chivo Mono 500, uppercase */

  /* ---------- Responsive type scale [PROVISIONAL: the homepage prototype scales in cqw and has no phone layout yet] ---------- */
  --ss-size-hero:clamp(3.5rem, 12.5vw, 11.25rem);
  --ss-size-h2:clamp(2.75rem, 7.4vw, 6.75rem);
  --ss-size-h3:clamp(1.75rem, 3.6vw, 3.25rem);
  --ss-size-lede:clamp(1.375rem, 2.4vw, 2.375rem);  /* approved desktop lede ≈ 34.6px at 1440 */
  --ss-size-body:clamp(1rem, 1.2vw, 1.125rem);      /* never below 16px for reading copy */
  --ss-size-short:clamp(1.25rem, 1.6vw, 1.5625rem); /* serif short lines: 20px minimum, about 25px desktop */
  --ss-size-list:clamp(.8125rem, .95vw, .875rem);   /* mono lists 13px and steps 14px minimum */
  --ss-size-label:clamp(.75rem, .85vw, .8125rem);   /* Chivo Mono labels: 12px minimum */
  --ss-size-cta:clamp(1rem, 1.25vw, 1.125rem);

  /* ---------- Signature graphic devices [APPROVED: homepage] ---------- */
  --ss-cut-offset:.085em;       /* the STATIC cut: top half -0.085em, bottom half +0.085em, split at the middle of the line box */
  --ss-amp-margin:0 .01em 0 .11em; /* optically balanced wordmark ampersand (D-42) */

  /* ---------- Motion [APPROVED: D-43 button; homepage cut] ---------- */
  --ss-ease:cubic-bezier(.2,.8,.2,1);
  --ss-dur-cta:320ms;           /* pink wipe */
  --ss-dur-tune:500ms;          /* hovered cut tunes back into line */

  /* ---------- Focus and borders [PROVISIONAL: taken from the button component] ---------- */
  --ss-focus-width:2px;
  --ss-focus-offset:4px;
  --ss-rule:1px;
}

/* Ground themes: black and white are equal grounds (D-38). Apply one per section. */
.ss-on-black{--ss-bg:var(--ss-black);--ss-fg:var(--ss-white);--ss-sub:var(--ss-grey-on-black);--ss-line:var(--ss-line-on-black);--ss-accent:var(--ss-pink);--ss-accent-text:var(--ss-pink);background:var(--ss-bg);color:var(--ss-fg)}
.ss-on-white{--ss-bg:var(--ss-white);--ss-fg:var(--ss-black);--ss-sub:var(--ss-grey-on-white);--ss-line:var(--ss-line-on-white);--ss-accent:var(--ss-pink);--ss-accent-text:var(--ss-pink-text-on-white);background:var(--ss-bg);color:var(--ss-fg)}

/* Mono text never uses ligatures (Chivo Mono has an fi ligature) */
.ss-mono{font-family:var(--ss-font-mono);font-variant-ligatures:none}

/* Reading roles [D-57] */
.ss-read-short{font-family:var(--ss-font-read-short);font-weight:400;font-size:var(--ss-size-short);line-height:var(--ss-short-lh)}
.ss-read-list{font-family:var(--ss-font-read-list);font-variant-ligatures:none;font-size:var(--ss-size-list);letter-spacing:var(--ss-list-track);text-transform:uppercase}
.ss-read-step{font-family:var(--ss-font-read-list);font-variant-ligatures:none;font-size:max(.875rem,var(--ss-size-list));line-height:var(--ss-step-lh)}
.ss-read-long{font-family:var(--ss-font-read-long);font-size:var(--ss-size-body);line-height:var(--ss-body-lh)}

@media (prefers-reduced-motion: reduce){
  :root{--ss-dur-cta:0ms;--ss-dur-tune:0ms}
}