/* GENERATED by build.py from forge/design/tokens. Do not edit; edit forge/design. */
/* ---- colors.css ---- */
/* ---------------------------------------------------------------------------
   COLOR — from §03 of RBL Design System.

   Navy is the anchor. One accent per page, chosen by function. State colors
   are never decoration, and every state also carries a word.
   --------------------------------------------------------------------------- */
:root {
  /* --- base: the anchor ------------------------------------------------- */
  --rbl-navy-ink: #1D243D;      /* ink on light surfaces */
  --rbl-navy-ground: #0E1626;   /* ground on dark surfaces */
  --rbl-navy-body: #2B3350;     /* body copy */
  --rbl-gray-muted: #667085;    /* muted / secondary */
  --rbl-rule: #DFE6EF;          /* hairline rule, card border */
  --rbl-rule-strong: #C9CFDA;   /* secondary-button border, print rule */
  --rbl-page: #F8FAFC;          /* light page ground */
  --rbl-white: #FFFFFF;         /* card ground */
  --rbl-tint-neutral: #EDF1F7;  /* callout / pill ground */

  /* --- base: accent, outward-facing (emerald) --------------------------- */
  --rbl-emerald: #0E9F6E;
  --rbl-emerald-hover: #0B7E57;
  --rbl-emerald-tint: #E8F6F0;
  --rbl-emerald-dark: #4ECFA1;  /* on dark ground */

  /* --- base: accent, internal operations (blue) ------------------------- */
  --rbl-blue: #2563EB;
  --rbl-blue-hover: #1D4FD8;
  --rbl-blue-tint: #EEF3FE;
  --rbl-blue-dark: #7AA2F7;     /* on dark ground */

  /* --- base: print neutrals -------------------------------------------- */
  --rbl-print-ink: #14181F;
  --rbl-print-rule: #C9CFDA;
  --rbl-print-paper: #FFFFFF;

  /* --- base: state ------------------------------------------------------ */
  --rbl-state-clear: #0E9F6E;
  --rbl-state-attention: #B45309;
  --rbl-state-priority: #C2352B;
  --rbl-state-parked: #667085;
  --rbl-state-priority-dark: #FF8A80;

  /* attention + priority card surfaces */
  --rbl-attention-surface: #FFFBF3;
  --rbl-attention-border: #E7C892;
  --rbl-attention-text: #5C4A2E;
  --rbl-priority-surface: #FDF2F1;
  --rbl-priority-border: #E3A9A3;
  --rbl-priority-text: #6B3A34;

  /* --- base: dark theme ------------------------------------------------- */
  --rbl-dark-ground: #0E1626;
  --rbl-dark-card: #17202F;
  --rbl-dark-ink: #E8ECF3;
  --rbl-dark-muted: #92A0B5;
  --rbl-dark-rule: #26314A;

  /* =====================================================================
     SEMANTIC ALIASES — light theme, outward-facing accent (the default).
     Build against these, not the base values above.
     ===================================================================== */
  --text-title: var(--rbl-navy-ink);
  --text-body: var(--rbl-navy-body);
  --text-muted: var(--rbl-gray-muted);
  --text-on-accent: #FFFFFF;
  --text-inverse: var(--rbl-dark-ink);

  --surface-page: var(--rbl-page);
  --surface-card: var(--rbl-white);
  --surface-tint: var(--rbl-tint-neutral);
  --surface-inverse: var(--rbl-navy-ground);

  --border-rule: var(--rbl-rule);
  --border-strong: var(--rbl-rule-strong);

  --accent: var(--rbl-emerald);
  --accent-hover: var(--rbl-emerald-hover);
  --accent-tint: var(--rbl-emerald-tint);
  --accent-on-dark: var(--rbl-emerald-dark);

  --state-clear: var(--rbl-state-clear);
  --state-attention: var(--rbl-state-attention);
  --state-priority: var(--rbl-state-priority);
  --state-parked: var(--rbl-state-parked);
}

/* Function switch: internal operations (console, manuals, estate map). */
[data-accent="internal"] {
  --accent: var(--rbl-blue);
  --accent-hover: var(--rbl-blue-hover);
  --accent-tint: var(--rbl-blue-tint);
  --accent-on-dark: var(--rbl-blue-dark);
}

/* Function switch: print. Accent drops to navy, tints drop to white,
   rules go gray. Nothing depends on color to be understood. */
[data-accent="print"] {
  --text-title: var(--rbl-print-ink);
  --text-body: var(--rbl-print-ink);
  --text-muted: #5C646F;
  --surface-page: var(--rbl-print-paper);
  --surface-card: var(--rbl-print-paper);
  --surface-tint: var(--rbl-print-paper);
  --border-rule: var(--rbl-print-rule);
  --border-strong: var(--rbl-print-rule);
  --accent: var(--rbl-print-ink);
  --accent-hover: var(--rbl-print-ink);
  --accent-tint: var(--rbl-print-paper);
}

/* Dark theme. Every surface ships light and dark. */
[data-theme="dark"] {
  --text-title: var(--rbl-dark-ink);
  --text-body: var(--rbl-dark-ink);
  --text-muted: var(--rbl-dark-muted);
  --text-inverse: var(--rbl-navy-ink);

  --surface-page: var(--rbl-dark-ground);
  --surface-card: var(--rbl-dark-card);
  --surface-tint: var(--rbl-dark-card);
  --surface-inverse: var(--rbl-page);

  --border-rule: var(--rbl-dark-rule);
  --border-strong: var(--rbl-dark-rule);

  --accent: var(--rbl-emerald-dark);
  --accent-hover: var(--rbl-emerald);
  --accent-tint: var(--rbl-dark-card);

  --state-priority: var(--rbl-state-priority-dark);
}

[data-theme="dark"][data-accent="internal"] {
  --accent: var(--rbl-blue-dark);
  --accent-hover: var(--rbl-blue);
}

/* ---- typography.css ---- */
/* ---------------------------------------------------------------------------
   TYPE — from §02 of RBL Design System.

   The family is decided by the ELEMENT, not by the content.

     --font-serif  document flow only, unboxed: page title, section head,
                   subhead, lede, body paragraph, prose list items and their
                   bold lead lines, definition terms and descriptions, pull
                   quotes, closing statement.
     --font-sans   everything inside a container: card title and body, rows
                   and list items in a panel, table headers and cells, labels,
                   eyebrows, nav, captions, buttons, pills, tags, stat
                   numerals and labels, callouts, footers, the wordmark.
     --font-mono   a closed reserved set, nothing else: filenames and paths,
                   commit hashes, version stamps, tier and workstream codes,
                   dates and timestamps.

   For anything not enumerated: if it sits inside a border, background, row,
   or cell, it is --font-sans. Serif is only ever unboxed. No fourth family.

   FLOORS (a violation should be catchable by eye):
     serif never below 18px and never sets a label
     sans never above 24px, except stat numerals
     mono never above 16px and never sets prose
     anything read as a sentence never below 16px on screen
     nothing below 14px on screen (14px is for all-caps labels, eyebrows
     and mono dates only), 10.5pt in print

   Scale raised September 27, 2026 for phone readability, phone and
   desktop, after a side-by-side with anthropic.com and media.mit.edu:
   card and interface text 15 -> 17px, reading 17-19 -> 18-20px, labels
   and eyebrows 11.5-12 -> 14px. See Website_v2_Design.md, "Type on the
   phone".
   --------------------------------------------------------------------------- */
:root {
  /* --- families --------------------------------------------------------- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- weights ---------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- the scale (mobile → desktop, fluid) ------------------------------ */
  --size-page-title: clamp(38px, 7vw, 60px);
  --size-section-head: clamp(29px, 4.2vw, 40px);
  --size-subhead: clamp(22px, 2.6vw, 26px);
  --size-lede: clamp(20px, 2.4vw, 24px);
  --size-body-reading: clamp(18px, 1.6vw, 20px);
  --size-body-interface: 17px;         /* cards, rows, nav: phone and desktop */
  --size-small: 16px;                  /* captions, metadata, footer links */
  --size-card-title: 19px;
  --size-button: 16px;
  --size-table: 16px;
  --size-label: 14px;
  --size-eyebrow: 14px;
  --size-tag: 14px;
  --size-mono: 14px;
  --size-stat: 34px;                   /* the one sans size above 24px */
  --size-pull-quote: clamp(23px, 3.2vw, 30px);

  /* --- tracking --------------------------------------------------------- */
  --tracking-page-title: -0.02em;
  --tracking-section-head: -0.015em;
  --tracking-wordmark: -0.01em;
  --tracking-stat: -0.02em;
  --tracking-label: 0.08em;
  --tracking-eyebrow: 0.16em;
  --tracking-lockup-console: 0.16em;

  /* --- line heights ----------------------------------------------------- */
  --leading-page-title: 1.08;
  --leading-section-head: 1.16;
  --leading-lede: 1.5;
  --leading-reading: 1.62;
  --leading-interface: 1.55;
  --leading-quote: 1.36;

  /* --- measure ---------------------------------------------------------- */
  --measure-lede: 60ch;
  --measure-reading: 68ch;
  --measure-quote: 52ch;
  --measure-callout: 70ch;

  /* --- floors ----------------------------------------------------------- */
  --floor-screen: 14px;                /* all-caps labels and mono dates only */
  --floor-sentence: 16px;              /* anything read as a sentence */
  --floor-print: 10.5pt;
  --floor-serif: 18px;
  --ceiling-sans: 24px;
  --ceiling-mono: 16px;

  /* =====================================================================
     SEMANTIC ALIASES
     ===================================================================== */
  --type-page-title: var(--weight-bold) var(--size-page-title) / var(--leading-page-title) var(--font-serif);
  --type-section-head: var(--weight-bold) var(--size-section-head) / var(--leading-section-head) var(--font-serif);
  --type-subhead: var(--weight-semibold) var(--size-subhead) / var(--leading-section-head) var(--font-serif);
  --type-lede: var(--weight-regular) var(--size-lede) / var(--leading-lede) var(--font-serif);
  --type-body: var(--weight-regular) var(--size-body-reading) / var(--leading-reading) var(--font-serif);
  --type-interface: var(--weight-regular) var(--size-body-interface) / var(--leading-interface) var(--font-sans);
  --type-card-title: var(--weight-semibold) var(--size-card-title) / 1.35 var(--font-sans);
  --type-table: var(--weight-regular) var(--size-table) / 1.5 var(--font-sans);
  --type-button: var(--weight-semibold) var(--size-button) / 1.2 var(--font-sans);
  --type-tag: var(--weight-medium) var(--size-tag) / 1.3 var(--font-sans);
  --type-stat: var(--weight-semibold) var(--size-stat) / 1 var(--font-sans);
  --type-quote: var(--weight-semibold) var(--size-pull-quote) / var(--leading-quote) var(--font-serif);
  --type-identifier: var(--weight-regular) var(--size-mono) / 1.5 var(--font-mono);
}


/* ---- spacing.css ---- */
/* ---------------------------------------------------------------------------
   SPACING — from §05 of RBL Design System.

   The step set is not a 4/8 grid; it is the ten values the system actually
   uses. Gaps come from `gap`, never from margins between siblings.
   --------------------------------------------------------------------------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 34px;
  --space-8: 48px;
  --space-9: 76px;
  --space-10: 88px;

  /* --- semantic aliases ------------------------------------------------- */
  --gap-tight: var(--space-2);        /* pills, tags, chips */
  --gap-grid: var(--space-4);         /* card grids */
  --gap-stack: var(--space-3);        /* stacked rows */
  --section-gap: var(--space-8);      /* 48px phone (was 76, Sept 27 2026) */
  --section-gap-desktop: var(--space-9); /* 76px desktop (was 88) */
  --card-padding: var(--space-5);     /* 20px floor */
  --card-padding-roomy: var(--space-6); /* 26px ceiling */
  --gutter: var(--space-5);           /* 20px mobile */
  --gutter-desktop: 32px;             /* above 700px */
  --tap-min: 44px;                    /* never smaller */
}

@media (min-width: 700px) {
  :root {
    --section-gap: var(--section-gap-desktop);
    --gutter: var(--gutter-desktop);
  }
}

/* ---- radii.css ---- */
/* ---------------------------------------------------------------------------
   RADII — from §05 of RBL Design System.

   NOTE: the source document defines no shadow system. Elevation is carried
   by a 1px rule (--border-rule) and, where a card is stateful, a 4px
   accent edge. There is deliberately no tokens/shadows.css.
   --------------------------------------------------------------------------- */
:root {
  --radius-sm: 8px;    /* buttons, inputs */
  --radius-md: 10px;   /* small cards, swatches, stat cards */
  --radius-lg: 12px;   /* standard cards */
  --radius-xl: 14px;   /* panels, dark blocks */
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-rule: 1.5px;  /* header and footer rules */
  --border-width-accent: 4px;  /* card top or left accent edge */
}

/* ---- layout.css ---- */
/* ---------------------------------------------------------------------------
   LAYOUT — from §05 of RBL Design System.

   One column, then more if there is room. Mobile-first: one column at 375px
   with nothing clipped and nothing below 15px. Two breakpoints only.
   --------------------------------------------------------------------------- */
:root {
  --width-reading: 68ch;      /* roughly 820px */
  --width-page: 1180px;       /* console and app pages */
  --width-diagram: 1320px;    /* diagrams and maps */
  --min-mobile: 375px;

  --bp-md: 700px;
  --bp-lg: 1024px;

  /* Grids use auto-fit + minmax so they reflow without media queries. */
  --grid-min-card: 280px;
  --grid-min-stat: 140px;
  --grid-min-swatch: 150px;

  --slide-width: 1920px;      /* deck stage */
  --slide-height: 1080px;
  --slide-pad: 110px;
  --slide-floor: 24px;        /* nothing smaller on a slide */
}