/* Recapi design tokens, from .claude/skills/recapi-design/tokens.json (keep the two in step). The fonts are in fonts.css. */

:root {
  color-scheme: light;
  --canvas: #F8F6F1;
  --surface: #FFFFFF;
  --surface-sunken: #F0EDE6;
  --line: #E3DFD6;
  --line-strong: #87837C;
  --ink: #13202E;
  --ink-muted: #4E5763;
  --ink-subtle: #5E6672;
  --orange: #FF9A5C;
  --on-orange: #13202E;
  --orange-text: #B43F0E;
  --orange-soft: #FFEFE5;
  --sky: #BFE3FF;
  --sky-soft: #E8F4FF;
  --sky-text: #1D5DA6;
  --mark-blue: #2A6CC4;
  --mark-sky: #5AA2E8;
  --action: #FF9A5C;
  --on-action: #13202E;
  --focus: #1D5DA6;
  --success: #0B7285;
  --success-soft: #E1F1F4;
  --warning: #9A5B00;
  --warning-soft: #FBEFD9;
  --danger: #B42318;
  --danger-soft: #FBE7E4;
  --code-bg: #13202E;
  --code-ink: #E6E9EF;
  --code-muted: #8D97A3;
  --code-key: #FF9A6B;
  --code-string: #8CCBFF;
  --chart-1: #E5682A;
  --chart-2: #3E8EDB;
  --chart-3: #0B7285;
  --chart-4: #B7791F;
  --chart-5: #87837C;
  --shadow-card: 0 1px 2px rgba(19,32,46,0.04), 0 6px 20px rgba(19,32,46,0.05);
  --shadow-pop: 0 1px 2px rgba(19,32,46,0.06), 0 8px 24px rgba(19,32,46,0.10);
  --shadow-modal: 0 2px 4px rgba(19,32,46,0.06), 0 24px 64px rgba(19,32,46,0.18);
  --font-display: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 120px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --control-sm: 32px;
  --control-md: 36px;
  --control-lg: 44px;
  --row-compact: 36px;
  --row-default: 44px;
  --sidebar-w: 232px;
  --content-max: 1200px;
}

/* Dark theme: console only (the marketing site is always light). Opt in with data-theme="dark", or follow the OS inside the console. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #10161E;
  --surface: #17202B;
  --surface-sunken: #0B1016;
  --line: #26313E;
  --line-strong: #66707D;
  --ink: #F1F3F5;
  --ink-muted: #A9B2BD;
  --ink-subtle: #8D97A3;
  --orange: #FFA266;
  --on-orange: #13202E;
  --orange-text: #FF9A6B;
  --orange-soft: #3A2418;
  --sky: #24496E;
  --sky-soft: #152A40;
  --sky-text: #8CCBFF;
  --mark-blue: #2A6CC4;
  --mark-sky: #5AA2E8;
  --action: #FFA266;
  --on-action: #13202E;
  --focus: #8CCBFF;
  --success: #5CC8DC;
  --success-soft: #11292E;
  --warning: #E8B25C;
  --warning-soft: #33270F;
  --danger: #FF8A7A;
  --danger-soft: #3A1A16;
  --code-bg: #0B1016;
  --code-ink: #E6E9EF;
  --code-muted: #8D97A3;
  --code-key: #FF9A6B;
  --code-string: #8CCBFF;
  --chart-1: #FFA266;
  --chart-2: #8CCBFF;
  --chart-3: #5CC8DC;
  --chart-4: #E3B25A;
  --chart-5: #66707D;
  --shadow-card: 0 0 0 1px #26313E;
  --shadow-pop: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.45);
  --shadow-modal: 0 2px 4px rgba(0,0,0,0.5), 0 24px 64px rgba(0,0,0,0.6);
}

/* Type styles */
.type-display-xl { font-family: var(--font-display); font-size: 72px; line-height: 74px; font-weight: 700; letter-spacing: -0.04em; }  /* Homepage hero headline only. One per page. */
.type-display-lg { font-family: var(--font-display); font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.035em; }  /* Homepage section headlines. */
.type-display-md { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.03em; }  /* Feature titles, pricing tiers, console empty-state headlines. */
.type-heading { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.03em; }  /* Console page titles (Overview, Models, Catalogue), in the display face. */
.type-title { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }  /* Card, panel and dialog titles. Table key cells use body-sm at weight 600. */
.type-body { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }  /* Marketing copy and long-form console text. */
.type-body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }  /* Default console UI text: table cells, form fields, helper text, menus. */
.type-label { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }  /* Uppercase overlines: stat labels, table column headers, sidebar section names. */
.type-metric { font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }  /* KPI numbers in stat cards. Tabular figures. */
.type-code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }  /* Code blocks, endpoints, request and response bodies. */
.type-mono-sm { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; font-variant-numeric: tabular-nums; }  /* IDs, keys, hashes and numeric table cells. */