/* deliverable.co design tokens
   Derived from Brand Guide v2.0, Aug 2026.
   Values marked DERIVED are not in the guide. Everything else is quoted from it.
   Do not add colours. Do not add type sizes below the stated floors. */

:root {
  /* ---- Colour: four values, there is no fifth ---- */
  --ink: #14202B;
  --paper: #EFEEE9;
  --signal: #CE3A33;
  --graphite: #5C646F;

  /* White is for cards sitting on paper. It is not a ground. */
  --card: #FFFFFF;

  /* DERIVED: hairlines and panels on the two grounds. */
  --rule-on-paper: rgba(20, 32, 43, 0.14);
  --rule-on-ink: rgba(239, 238, 233, 0.16);
  --panel-on-ink: rgba(239, 238, 233, 0.04);

  /* ---- Type families ---- */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Type scale ----
     Statement 96, heading 64, subhead 28 (display floor), body 18/16 (floor 16),
     label 11 to 13. The clamp lower bounds are DERIVED for small screens; the
     28px display floor and 16px body floor are not clamped and never move. */
  --t-statement: clamp(46px, 8.5vw, 96px);
  --t-heading: clamp(34px, 5.6vw, 64px);
  --t-subhead: 28px;
  --t-body: 18px;
  --t-body-floor: 16px;
  --t-label: 12px;

  --lh-display: 1.02;
  --lh-subhead: 1.2;
  --lh-body: 1.55;
  --lh-body-floor: 1.6;
  --lh-label: 1.4;

  /* ---- Tracking ----
     Bricolage takes -0.02 to -0.03em at heading sizes. Body tracking is zero.
     Mono labels are tracked 0.10 to 0.13em. */
  --track-statement: -0.03em;
  --track-heading: -0.02em;
  --track-body: 0;
  --track-label: 0.12em;

  /* Word gaps in tracked caps read at about 2.6 times the letter gap, or word
     boundaries dissolve into the tracking. Check by eye, this is a starting point. */
  --word-gap-label: 0.35em;

  /* ---- Measure ---- */
  --measure: 64ch;      /* target */
  --measure-max: 88ch;  /* hard ceiling, the guide's 90 character limit */

  /* ---- Weights ---- */
  --w-display: 800;
  --w-body: 400;
  --w-body-strong: 500;
  --w-mono: 500;
  --w-mono-strong: 600;

  /* ---- DERIVED spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 144px;

  --page-max: 1280px;
  --gutter: clamp(20px, 5vw, 80px);

  /* ---- DERIVED radii ----
     The logo square uses a corner radius of 8% of its side. Cards echo that
     ratio loosely rather than copying it, so nothing competes with the mark. */
  --radius-card: 10px;
  --radius-control: 4px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01ms; }
}

/* ---- Base primitives ----
   Kept minimal on purpose. Layout belongs in site.css. */

.statement {
  font-family: var(--display);
  font-weight: var(--w-display);
  font-size: var(--t-statement);
  line-height: var(--lh-display);
  letter-spacing: var(--track-statement);
  color: var(--ink);
}

.heading {
  font-family: var(--display);
  font-weight: var(--w-display);
  font-size: var(--t-heading);
  line-height: var(--lh-display);
  letter-spacing: var(--track-heading);
  color: var(--ink);
}

.subhead {
  font-family: var(--display);
  font-weight: var(--w-display);
  font-size: var(--t-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--track-heading);
  color: var(--ink);
}

.body {
  font-family: var(--body);
  font-weight: var(--w-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  color: var(--ink);
  max-width: var(--measure);
}

.body--small {
  font-size: var(--t-body-floor);
  line-height: var(--lh-body-floor);
}

/* Secondary text only. Never a heading. 5.1:1 on paper. */
.body--secondary { color: var(--graphite); }

.label {
  font-family: var(--mono);
  font-weight: var(--w-mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-label);
  word-spacing: var(--word-gap-label);
  text-transform: uppercase;
  color: var(--graphite);
}

.label--strong {
  font-weight: var(--w-mono-strong);
  color: var(--ink);
}

/* ---- Grounds ---- */
.on-paper { background: var(--paper); color: var(--ink); }
.on-ink { background: var(--ink); color: var(--paper); }

.on-ink .statement,
.on-ink .heading,
.on-ink .subhead,
.on-ink .body { color: var(--paper); }

/* Graphite is too dark on ink. Secondary text on ink is paper at reduced opacity. */
.on-ink .body--secondary { color: rgba(239, 238, 233, 0.68); }

/* ---- Status ----
   The only place signal appears outside the logo. Always paired with a label,
   never colour alone: signal and graphite are one luminance point apart in
   greyscale, so colour carries no information on its own. */
.status { display: inline-flex; align-items: center; gap: 10px; }

.status__square {
  width: 10px;
  height: 10px;
  border-radius: 1px;
  flex: none;
  background: var(--ink);
}

.status--action .status__square { background: var(--signal); }

.status__label {
  font-family: var(--mono);
  font-weight: var(--w-mono-strong);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  word-spacing: var(--word-gap-label);
  text-transform: uppercase;
  color: var(--ink);
}

.on-ink .status--action .status__square { background: var(--signal); }
.on-ink .status__label { color: var(--paper); }

/* ---- Focus ----
   Signal is never a border, so it is never a focus ring either. */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.on-ink :where(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--paper);
}