/* Bridge AI - locked design tokens. Apply verbatim. Single source of truth for any Bridge AI surface. */

:root {
  /* ── Colors ── */
  --color-paper-white: #fbfaf9;    /* page canvas */
  --color-bone: #f4f2ef;           /* card surfaces, insets */
  --color-ash-border: #e4e1dc;     /* all hairline borders, rules */
  --color-ink: #1a1a1a;            /* primary text, headings, filled button */
  --color-graphite: #6b6862;       /* secondary body text, metadata */
  --color-fog: #9a958c;            /* tertiary helper text, captions */
  --color-obsidian: #000000;       /* dark canvas, deck/hero, logo field */
  --color-pure-white: #ffffff;     /* text on dark, elevated card */
  --color-blueprint-blue: #1b45d9; /* DATA-VIZ + decorative ONLY - never a UI state */

  /* Dark variant surfaces */
  --color-dark-canvas: #000000;
  --color-dark-raised: #111111;
  --color-dark-border: #2a2a2a;

  /* ── Typography - families ── */
  --font-dm-sans: 'DM Sans', Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wordmark: 'DM Sans', Figtree, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Typography - weights ── */
  --font-weight-light: 300;    /* every headline >= 28px */
  --font-weight-regular: 400;  /* body */
  --font-weight-medium: 500;   /* UI / labels */
  --font-weight-bold: 700;     /* rare emphasis + wordmark */

  /* ── Typography - scale ── */
  --text-caption: 11px;     --leading-caption: 1.4;     --tracking-caption: 0.12em;
  --text-body: 16px;        --leading-body: 1.5;        --tracking-body: 0;
  --text-subheading: 18px;  --leading-subheading: 1.45; --tracking-subheading: 0;
  --text-section: 22px;     --leading-section: 1.3;      --tracking-section: -0.01em;
  --text-heading: 28px;     --leading-heading: 1.2;      --tracking-heading: -0.02em;
  --text-heading-lg: 36px;  --leading-heading-lg: 1.13;  --tracking-heading-lg: -0.02em;
  --text-display: 48px;     --leading-display: 1.08;     --tracking-display: -0.02em;

  /* ── Spacing (4px base) ── */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px;
  --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; --spacing-96: 96px;
  --spacing-160: 160px;

  /* ── Radius - no pills ── */
  --radius-input: 0px;
  --radius-button: 4px;
  --radius-card: 6px;
  --radius-card-lg: 8px;

  /* ── Shadows - borders-first, hairline only ── */
  --shadow-ring: rgba(0,0,0,0.06) 0px 0px 0px 1px;
  --shadow-inset: rgba(0,0,0,0.08) 0px 0px 0px 1px inset;

  /* ── Layout ── */
  --page-max-width: 1100px;
  --section-gap: 96px;
  --card-padding: 32px;
  --element-gap: 16px;
}

/* ── Tailwind v4 @theme (no-op outside a Tailwind build; helps Tailwind designs) ── */
@theme {
  --color-paper-white: #fbfaf9;
  --color-bone: #f4f2ef;
  --color-ash-border: #e4e1dc;
  --color-ink: #1a1a1a;
  --color-graphite: #6b6862;
  --color-fog: #9a958c;
  --color-obsidian: #000000;
  --color-pure-white: #ffffff;
  --color-blueprint-blue: #1b45d9;
  --color-dark-canvas: #000000;
  --color-dark-raised: #111111;
  --color-dark-border: #2a2a2a;

  --font-dm-sans: 'DM Sans', Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-caption: 11px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-section: 22px;
  --text-heading: 28px;
  --text-heading-lg: 36px;
  --text-display: 48px;

  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px;
  --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; --spacing-96: 96px;
  --spacing-160: 160px;

  --radius-input: 0px;
  --radius-button: 4px;
  --radius-card: 6px;
  --radius-card-lg: 8px;

  --shadow-ring: rgba(0,0,0,0.06) 0px 0px 0px 1px;
  --shadow-inset: rgba(0,0,0,0.08) 0px 0px 0px 1px inset;
}