/* Tandem Bureau Design System - combined stylesheet for the static launch build.
   Generated from the canonical token + base files. Single file for clean Cloudflare Pages deploy. */


/* ===== tokens/fonts.css ===== */
/* Tandem Bureau: Webfonts (Google Fonts only, per brief)
   Manrope: headings, display, wordmark contexts
   Inter: body text
   IBM Plex Mono: labels, statuses, metadata, table headers
   Two weights max per face in normal use. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&family=Inter:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ===== tokens/colors.css ===== */
/* Tandem Bureau: Colour tokens
   Working values for R1. Judgment calls are noted in "reason:" comments below. */

:root {
  /* ---- Brand core (fixed by brief) ---- */
  --ink: #1A1C1E;        /* primary text, headings, logo ink block */
  --green: #5C6B47;      /* Bureau Green: accent, tagline, completed states, checkmarks, progress */
  --paper: #F4F1E9;      /* document and section backgrounds */
  --white: #FFFFFF;      /* cards and content surfaces */

  /* ---- Green support ---- reason: hover/active + soft fill derived from Bureau Green,
     kept in the same olive family so completed/progress states never introduce a new hue. */
  --green-strong: #4C5A3A;  /* hover/pressed accent */
  --green-deep:   #3D4730;  /* text-on-paper green for small type, meets contrast */
  --green-soft:   #E9ECE0;  /* completed-row / selected fill */
  --green-line:   #C7CFB8;  /* green border on soft fills */

  /* ---- Neutral grey scale ---- reason: warm-tinted greys (not pure neutral) so borders and
     secondary text sit naturally on the cream paper instead of looking cold and pasted-on. */
  --grey-50:  #F2F1EC;
  --grey-100: #E8E6DF;
  --grey-200: #D9D6CD;
  --grey-300: #C2BEB3;
  --grey-400: #9E9A8F;
  --grey-500: #7C786E;
  --grey-600: #5E5B53;
  --grey-700: #45433D;
  --grey-800: #2E2D29;
  --grey-900: #1F1F1C;

  /* ---- Alert Amber ---- functional only: warnings and pending.
     reason: pushed toward burnt-orange and away from yellow so it can never blur with the
     prohibited gold/tan. Pale fill used sparingly on pending rows only, never decoratively. */
  --amber:      #B45F06;  /* icon + text on light */
  --amber-deep: #8F4B05;  /* small text needing more contrast */
  --amber-soft: #F6E7D2;  /* pending-row fill (use sparingly) */
  --amber-line: #E4C49A;  /* border on amber-soft fills */

  /* ---- Blocker Red ---- functional only: escalation above amber for hard blockers.
     reason: a true blocker outranks a pending warning, so it earns its own hue. Kept deep and
     earthy (not a fire-engine red) so it sits with the olive and amber rather than shouting.
     Always pair with an icon or label; never signal blocked state by hue alone. */
  --red:      #A6321F;  /* Blocker Red: escalation above amber. icon or large text on light */
  --red-deep: #822A1C;  /* small blocker text needing more contrast, meets AA on paper */
  --red-soft: #F4DAD3;  /* blocker-row fill (use sparingly) */
  --red-line: #E0B3A8;  /* border on red-soft fills */

  /* ================= Semantic aliases ================= */

  /* Text */
  --text-primary:   var(--ink);
  --text-secondary: var(--grey-600);
  --text-muted:     var(--grey-600);  /* raised from grey-500: muted text is only ever small, and grey-500 fails AA below 24px. grey-500 is now reserved for borders, dividers, and decorative marks. */
  --text-on-dark:   var(--paper);
  --text-on-green:  var(--white);
  --text-link:      var(--green-deep);

  /* Surfaces */
  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-sunken: var(--grey-50);
  --surface-ink:    var(--ink);
  --surface-green:  var(--green);

  /* Lines */
  --border-subtle:  var(--grey-100);
  --border-default: var(--grey-200);
  --border-strong:  var(--grey-300);
  --divider:        var(--grey-200);

  /* Accent */
  --accent:         var(--green);
  --accent-strong:  var(--green-strong);
  --accent-soft:    var(--green-soft);

  /* Status: done / pending / blocker / not-started.
     reason: green for done, amber for pending, red for hard blockers, grey for not-started.
     Red outranks amber and is always paired with an icon or label, never hue alone. */
  --status-done-fg:    var(--green-deep);
  --status-done-bg:    var(--green-soft);
  --status-done-line:  var(--green-line);
  --status-pending-fg: var(--amber-deep);
  --status-pending-bg: var(--amber-soft);
  --status-pending-line: var(--amber-line);
  --status-blocker-fg:   var(--red-deep);
  --status-blocker-bg:   var(--red-soft);
  --status-blocker-line: var(--red-line);
  --status-idle-fg:    var(--grey-600);
  --status-idle-bg:    var(--grey-100);
  --status-idle-line:  var(--grey-200);

  /* Focus ring: green, used on interactive elements */
  --focus-ring: 0 0 0 3px rgba(92, 107, 71, 0.35);
}

/* ===== tokens/typography.css ===== */
/* Tandem Bureau: Typography tokens
   Manrope (headings/display) · Inter (body) · IBM Plex Mono (labels/statuses)
   Two weights max per face: Manrope 500/700, Inter 400/600, Mono 400/500. */

:root {
  /* Families */
  --font-display: 'Manrope', system-ui, sans-serif;   /* headings, display, wordmark contexts */
  --font-body:    'Inter', system-ui, sans-serif;     /* body text */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace; /* labels, statuses, metadata, table headers */

  /* Weights (two per face) */
  --weight-body:     400;
  --weight-body-bold:600;
  --weight-head:     500;  /* Manrope Medium: wordmark + most headings */
  --weight-head-bold:700;  /* Manrope Bold: display + emphasis */
  --weight-mono:     400;
  --weight-mono-med: 500;

  /* Type scale: sizes / line-heights. reason: a modest ~1.25 ratio keeps documents calm
     and dense enough for proposals while staying comfortable on the one-page site. */
  --text-display:  44px;  --lh-display:  52px;  /* hero / cover */
  --text-h1:       34px;  --lh-h1:       42px;
  --text-h2:       26px;  --lh-h2:       34px;
  --text-h3:       20px;  --lh-h3:       28px;
  --text-h4:       17px;  --lh-h4:       24px;
  --text-body-lg:  18px;  --lh-body-lg:  29px;
  --text-body:     16px;  --lh-body:     26px;
  --text-body-sm:  14px;  --lh-body-sm:  22px;
  --text-caption:  13px;  --lh-caption:  18px;
  --text-label:    12px;  --lh-label:    16px;  /* mono, letterspaced, uppercase */

  /* Letter-spacing */
  --tracking-tight:  -0.01em;  /* display / large Manrope */
  --tracking-normal: 0;
  --tracking-label:  0.08em;   /* mono uppercase labels + tagline */
  --tracking-wide:   0.14em;   /* tagline lockup feel */
}

/* ===== tokens/spacing.css ===== */
/* Tandem Bureau: Spacing, radii, borders, elevation
   4px base grid. Flat surfaces; elevation reserved for true overlays only. */

:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Radii: derived from the mark, whose ink block is ~12px radius on a 68px height
     (~0.18). The family keeps that same softness across chips, buttons, and cards. */
  --radius-xs:   4px;   /* interlock-tab motif, small chips */
  --radius-sm:   6px;
  --radius-md:   10px;  /* buttons, inputs, status pills (square-ish) */
  --radius-lg:   14px;  /* cards, panels: matches mark block softness */
  --radius-xl:   18px;  /* large surfaces, hero panels */
  --radius-pill: 999px; /* status dots/pills when fully round */

  /* Border widths */
  --border-w:        1px;
  --border-w-strong: 1.5px;

  /* Elevation: brief forbids heavy/3D shadows. Surfaces are flat and use borders.
     A single soft overlay shadow exists only for menus, dialogs, and toasts that float. */
  --shadow-none: none;
  --shadow-overlay: 0 1px 2px rgba(26, 28, 30, 0.06), 0 10px 28px rgba(26, 28, 30, 0.10);

  /* Layout */
  --container-doc:  720px;   /* document text column */
  --container-site: 1120px;  /* website max width */
  --gutter:         24px;
}

/* ===== tokens/base.css ===== */
/* Tandem Bureau: Base element defaults
   Sets the calm document ground: cream paper, Inter body, ink text. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-head-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--weight-head); }
h4 { font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: var(--weight-head); letter-spacing: var(--tracking-normal); }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--green-strong); }

/* The mono label/eyebrow utility: used across components and templates. */
.tb-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono-med);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}