/* ============================================================
   Work Worth Doing — design tokens
   Copied from tokens/ in the Work Worth Doing design system in
   Claude Design. The design system is the
   source of truth; if a value here disagrees with it, this file
   is wrong. Regenerate rather than hand-edit.
   ============================================================ */

:root{
/* ── Red theme — burgundy and flare. The lead theme. ── */
--red-primary-bg:#570000;        /* deep burgundy */
--red-primary-ink:#fd2c02;       /* flare — 3.9:1, headline scale only */
--red-primary-hover:#7A0A00;
--red-primary-active:#360000;
--red-secondary-bg:#AF321D;      /* deep flare — the accent darkened, chroma kept */
--red-secondary-ink:#f5ede1;     /* cream — 5.5:1 */
--red-secondary-hover:#BA3F2B;
--red-secondary-active:#9A210C;
--red-secondary-active-ink:#f5ede1; /* 7.0:1 on the pressed ground */
--red-secondary-heading:#FBDCD8; /* burgundy tint — headings on the secondary ground, 5.0:1 */
--red-tertiary-bg:#FBDCD8;       /* burgundy tint */
--red-tertiary-ink:#C21B00;      /* deep flare — 4.7:1 */
--red-tertiary-hover-bg:#FBDCD8;
--red-tertiary-active-bg:#F6C6C0;
--red-tertiary-active-ink:#8E1400;

/* ── Purple theme — aubergine and violet. The dark ground. ── */
--purple-primary-bg:#3E2436;     /* aubergine */
--purple-primary-ink:#bb5aff;    /* violet — 4.0:1, headline scale only */
--purple-primary-hover:#57324B;
--purple-primary-active:#2A1824;
--purple-secondary-bg:#7C3B8B;   /* grape — violet darkened, chroma kept */
--purple-secondary-ink:#f5ede1;  /* cream — 6.3:1 */
--purple-secondary-hover:#8C4D9A;
--purple-secondary-active:#6A2D78;
--purple-secondary-active-ink:#f5ede1; /* 8.0:1 on the pressed ground */
--purple-secondary-heading:#E6DAEB; /* aubergine tint — headings on the secondary ground, 5.5:1 */
--purple-tertiary-bg:#E6DAEB;    /* aubergine tint */
--purple-tertiary-ink:#6A18B8;   /* deep violet — 6.4:1 */
--purple-tertiary-active-bg:#D6C3DE;
--purple-tertiary-active-ink:#4F118A;

/* ── Green theme — forest and acid. The highest contrast. ── */
--green-primary-bg:#24382C;      /* forest */
--green-primary-ink:#a9c62f;     /* acid — 6.4:1 */
--green-primary-hover:#33503F;
--green-primary-active:#18261D;
--green-secondary-bg:#2A7449;    /* mid forest — the primary hue, opened up */
--green-secondary-ink:#f5ede1;   /* cream — 4.9:1 */
--green-secondary-hover:#307A4F;
--green-secondary-active:#18633B;
--green-secondary-active-ink:#f5ede1; /* 6.3:1 on the pressed ground */
--green-secondary-heading:#DFF0E4; /* pale forest — headings and small labels on the secondary ground, 4.8:1 */
--green-tertiary-bg:#D7E4DA;     /* forest tint */
--green-tertiary-ink:#1F6B45;    /* mid forest — 4.9:1 */
--green-tertiary-active-bg:#C3D6C8;
--green-tertiary-active-ink:#175234;

/* ── Neutrals — theme-independent ── */
--cream:#f5ede1;                 /* page and panel ground */
--ink:#241C18;                   /* body copy, footer ground */
--paper:#EFE9DF;                 /* the slightly cooler desk behind cream */
--panel:#FAF6EF;                 /* raised specimen / spec panel */
--white:#ffffff;
--hairline:#E3DACD;              /* dividers inside cream */
--border:#DCD2C4;                /* panel borders */
--rule:#D8CFC1;                  /* section rules, resting field borders */
--list-rule:#E0D3C6;
--rule-on-dark:rgba(245,237,225,0.22); /* hairline on any rich primary ground */
--ink-muted:#6A5C50;             /* the one lighter text tone: labels, eyebrows, annotation, captions */
--control-rest:#C6BBAA;          /* unselected radio / checkbox ring */
--footer-body:#E3C9C4;           /* muted body on burgundy */
--footer-label:#C99B92;

/* ── Semantic aliases — default (red) theme ── */
--theme-primary-bg:var(--red-primary-bg);
--theme-primary-ink:var(--red-primary-ink);
--theme-secondary-bg:var(--red-secondary-bg);
--theme-secondary-ink:var(--red-secondary-ink);
--theme-secondary-active-ink:var(--red-secondary-active-ink);
--theme-secondary-heading:var(--red-secondary-heading);
--theme-tertiary-bg:var(--red-tertiary-bg);
--theme-tertiary-ink:var(--red-tertiary-ink);

--surface-page:var(--cream);
--surface-card:var(--cream);
--surface-panel:var(--panel);
--surface-inverse:var(--red-primary-bg);
--surface-field:var(--cream);

--text-heading:var(--red-primary-bg);
--text-body:var(--ink);
--text-body-inverse:var(--cream);
--text-label:var(--ink-muted);
--text-muted:var(--ink-muted);
--text-eyebrow:var(--ink-muted);

--border-default:var(--rule);
--border-focus:var(--ink);

--status-success-bg:var(--green-tertiary-bg);
--status-success-ink:var(--green-primary-bg);
--status-error-bg:var(--red-tertiary-bg);
--status-error-ink:var(--red-tertiary-ink);
--status-progress-bg:var(--purple-tertiary-bg);
--status-progress-ink:var(--purple-tertiary-ink);

--link:var(--red-tertiary-ink);
--link-hover:var(--red-primary-bg);
}

/* Theme scopes — set data-theme on any container to re-point the semantic aliases. */
[data-theme="purple"]{
--theme-primary-bg:var(--purple-primary-bg);--theme-primary-ink:var(--purple-primary-ink);
--theme-secondary-bg:var(--purple-secondary-bg);--theme-secondary-ink:var(--purple-secondary-ink);--theme-secondary-active-ink:var(--purple-secondary-active-ink);--theme-secondary-heading:var(--purple-secondary-heading);
--theme-tertiary-bg:var(--purple-tertiary-bg);--theme-tertiary-ink:var(--purple-tertiary-ink);
--surface-inverse:var(--purple-primary-bg);--text-heading:var(--purple-primary-bg);
--link:var(--purple-tertiary-ink);--link-hover:var(--purple-primary-bg);
}
/* Red has no scope in the design system — it is the page default. This
   lets a single section on a purple or green page switch back to red. */
[data-theme="red"]{
--theme-primary-bg:var(--red-primary-bg);--theme-primary-ink:var(--red-primary-ink);
--theme-secondary-bg:var(--red-secondary-bg);--theme-secondary-ink:var(--red-secondary-ink);--theme-secondary-active-ink:var(--red-secondary-active-ink);--theme-secondary-heading:var(--red-secondary-heading);
--theme-tertiary-bg:var(--red-tertiary-bg);--theme-tertiary-ink:var(--red-tertiary-ink);
--surface-inverse:var(--red-primary-bg);--text-heading:var(--red-primary-bg);
--link:var(--red-tertiary-ink);--link-hover:var(--red-primary-bg);
}
[data-theme="green"]{
--theme-primary-bg:var(--green-primary-bg);--theme-primary-ink:var(--green-primary-ink);
--theme-secondary-bg:var(--green-secondary-bg);--theme-secondary-ink:var(--green-secondary-ink);--theme-secondary-active-ink:var(--green-secondary-active-ink);--theme-secondary-heading:var(--green-secondary-heading);
--theme-tertiary-bg:var(--green-tertiary-bg);--theme-tertiary-ink:var(--green-tertiary-ink);
--surface-inverse:var(--green-primary-bg);--text-heading:var(--green-primary-bg);
--link:var(--green-tertiary-ink);--link-hover:var(--green-primary-bg);
}

:root{
--radius-pill:999px;      /* buttons, tags, inputs, selects, radios, checkboxes, toggles */
--radius-textarea:22px;
--radius-block:8px;       /* cards, bands, heroes, panels inside a spec sheet */
--radius-panel:10px;      /* outer spec panels, swatch tiles */

--border-hairline:1px;
--border-control:1.5px;

--shadow-button:0 2px 5px rgba(36,28,24,0.16);
--shadow-card:0 3px 10px rgba(36,28,24,0.12);
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:14px;--space-5:16px;
--space-6:20px;--space-7:24px;--space-8:26px;--space-9:32px;--space-10:40px;
--space-11:48px;--space-12:56px;--space-13:80px;

--pad-button-y:14px;--pad-button-x:28px;
--pad-button-outline-y:12.5px;          /* 1.5px border keeps the pill the same height */
--pad-field-y:13px;--pad-field-x:20px;
--pad-tag-y:7px;--pad-tag-x:15px;
--pad-card:26px;
--pad-panel:26px;
--pad-section-y:48px;--pad-section-x:40px;
--pad-band-y:38px;--pad-band-x:34px;

--gap-card-grid:14px;
--gap-section:32px;
--col-narrow:40%;   /* caption + heading column */
--col-wide:60%;     /* body / list column */
--control-hit:44px;
}

:root{
--font-display:"Codec Pro",Figtree,sans-serif;   /* headings, buttons, tags, captions, nav */
--font-text:"Hanken Grotesk",sans-serif;         /* body, labels, annotation, numerals */
--font-icon:"Material Symbols Rounded";          /* icons — weight 200, unfilled */

--weight-display-regular:400;
--weight-display-medium:600;
--weight-display-fat:900;
--weight-text-light:300;
--weight-text-regular:400;
--weight-text-bold:700;

/* Display scale — Codec Pro */
--size-h1:56px;   --lh-h1:1.0;/* @kind other */   --ls-h1:0;/* @kind other */      /* capitals, one word in Fat */
--size-h2:48px;   --lh-h2:1.05;/* @kind other */                  /* sentence case */
--size-h3:40px;   --lh-h3:1.15;/* @kind other */                  /* sentence case, weight 600 */
--size-h4:32px;   --lh-h4:1.2;/* @kind other */   --ls-h4:0.01em;/* @kind other */
--size-h5:24px;   --lh-h5:1.2;/* @kind other */   --ls-h5:0.02em;/* @kind other */ /* capitals */
--size-quote:24px;--lh-quote:1.35;/* @kind other */
--size-caption:12px;--lh-caption:1;/* @kind other */--ls-caption:0.06em;/* @kind other */ /* capitals */

/* Text scale — Hanken Grotesk */
--size-subheading:16px;--lh-subheading:1.6;/* @kind other */
--size-body:16px;      --lh-body:1.75;/* @kind other */
--size-body-sm:14px;   --lh-body-sm:1.7;/* @kind other */
--size-body-card:15.5px;
--size-annotation:10.5px;--lh-annotation:1.75;/* @kind other */
--size-eyebrow:11px;   --ls-eyebrow:0.14em;/* @kind other */
--size-micro:10px;     --ls-micro:0.16em;/* @kind other */

--measure:68ch;/* @kind other */
}

/* ── Fonts ────────────────────────────────────────────────────────────
   Codec Pro is the licensed webfont, served from assets/fonts/ — WOFF2
   for every current browser, WOFF for the few older ones. Regular
   covers weights 300–600, Fat covers 700–900.

   There is deliberately no local(): every visitor, including anyone with
   a desktop copy installed, gets the same served files.

   Hanken Grotesk loads from Google Fonts via a <link> in the page head.
   Figtree loads alongside it as the display fallback the design system
   names, shown only if the Codec Pro files fail to load.
   ─────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:"Codec Pro";
  src:url("assets/fonts/CodecPro-Regular.woff2") format("woff2"),
      url("assets/fonts/CodecPro-Regular.woff") format("woff");
  font-weight:300 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Codec Pro";
  src:url("assets/fonts/CodecPro-Fat.woff2") format("woff2"),
      url("assets/fonts/CodecPro-Fat.woff") format("woff");
  font-weight:700 900;font-style:normal;font-display:swap;
}

/* ── Extension: theme-scoped interaction aliases ──────────────────────
   The design system ships semantic aliases for the resting colours
   (--theme-primary-bg and friends) but not for hover/press, which its
   React components read straight off the theme prefix. A stylesheet
   cannot interpolate a prefix, so the same aliases are continued here
   for the interaction states. Values are verbatim from
   tokens/colors.css in the design system — nothing new is invented.
   ─────────────────────────────────────────────────────────────────── */

:root{
--theme-primary-ink-on-bg:var(--red-primary-ink);
--theme-primary-hover:var(--red-primary-hover);
--theme-primary-active:var(--red-primary-active);
--theme-secondary-hover:var(--red-secondary-hover);
--theme-secondary-active:var(--red-secondary-active);
--theme-tertiary-hover-bg:var(--red-tertiary-hover-bg);
--theme-tertiary-active-bg:var(--red-tertiary-active-bg);
--theme-tertiary-active-ink:var(--red-tertiary-active-ink);
}
[data-theme="red"]{
--theme-primary-ink-on-bg:var(--red-primary-ink);
--theme-primary-hover:var(--red-primary-hover);
--theme-primary-active:var(--red-primary-active);
--theme-secondary-hover:var(--red-secondary-hover);
--theme-secondary-active:var(--red-secondary-active);
--theme-tertiary-hover-bg:var(--red-tertiary-hover-bg);
--theme-tertiary-active-bg:var(--red-tertiary-active-bg);
--theme-tertiary-active-ink:var(--red-tertiary-active-ink);
}
[data-theme="purple"]{
--theme-primary-ink-on-bg:var(--purple-primary-ink);
--theme-primary-hover:var(--purple-primary-hover);
--theme-primary-active:var(--purple-primary-active);
--theme-secondary-hover:var(--purple-secondary-hover);
--theme-secondary-active:var(--purple-secondary-active);
--theme-tertiary-hover-bg:var(--purple-tertiary-bg);
--theme-tertiary-active-bg:var(--purple-tertiary-active-bg);
--theme-tertiary-active-ink:var(--purple-tertiary-active-ink);
}
[data-theme="green"]{
--theme-primary-ink-on-bg:var(--green-primary-ink);
--theme-primary-hover:var(--green-primary-hover);
--theme-primary-active:var(--green-primary-active);
--theme-secondary-hover:var(--green-secondary-hover);
--theme-secondary-active:var(--green-secondary-active);
--theme-tertiary-hover-bg:var(--green-tertiary-bg);
--theme-tertiary-active-bg:var(--green-tertiary-active-bg);
--theme-tertiary-active-ink:var(--green-tertiary-active-ink);
}