/* Generated by generate-tokens.js — Do not edit manually.
   Source: src/tokens.json
   L2 semantic tokens + typography + spacing + layout tokens.
   Convention: docs/TOKEN_CONVENTION.md */

@import "primitives.css";

:root {

  /* ── SURFACE — LAYOUT ── */
  --surface-layout-canvas: #ffffff;
  --surface-layout-canvas-subtle: #ffffff;
  --surface-layout-ground: var(--pal-neutral-200);
  --surface-layout-ground-subtle: var(--pal-neutral-150);
  --surface-layout-ground-bold: var(--pal-neutral-400);
  --surface-layout-ground-bolder: var(--pal-neutral-900);
  --surface-layout-ground-brand: var(--pal-blue-700);
  --surface-layout-featured-subtlest: var(--pal-neutral-25);
  --surface-layout-featured-brand-subtlest: var(--pal-blue-25);
  --surface-layout-featured-brand-subtler: var(--pal-blue-60);

  /* ── SURFACE — COMPONENTS ── */
  --surface-components-pill: var(--surface-layout-canvas-subtle);
  --surface-components-pill-accent: var(--pal-teal-100);

  /* ── SURFACE — ENCODING ── */
  --surface-encoding-mark-concept-1: var(--pal-grey-800);
  --surface-encoding-mark-concept-2: var(--pal-blue-700);
  --surface-encoding-mark-concept-3: var(--pal-teal-700);
  --surface-encoding-mark-brand: var(--pal-blue-250);
  --surface-encoding-mark-series-1: var(--pal-neutral-600);
  --surface-encoding-mark-series-1-subtle: var(--pal-neutral-500);
  --surface-encoding-mark-series-2: var(--pal-blue-700);
  --surface-encoding-mark-series-2-subtle: var(--pal-blue-500);
  --surface-encoding-mark-series-3: var(--ext-plum-700);
  --surface-encoding-mark-series-4: var(--pal-teal-600);
  --surface-encoding-mark-series-4-bold: var(--pal-teal-800);
  --surface-encoding-mark-success: var(--ext-green-25);
  --surface-encoding-mark-warning: var(--pal-gold-25);
  --surface-encoding-mark-fail: var(--pal-red-25);
  --surface-encoding-scale-brand-base: var(--pal-blue-60);
  --surface-encoding-scale-brand-max: var(--pal-blue-700);
  --surface-encoding-scale-brand-zero: var(--pal-neutral-200);
  --surface-encoding-scale-accent-max: var(--pal-teal-700);
  --surface-encoding-scale-accent-mid: var(--pal-teal-500);
  --surface-encoding-scale-accent-base: var(--pal-teal-300);
  --surface-encoding-scale-accent-track: var(--pal-teal-100);

  /* ── TEXT — LAYOUT ── */
  --text-layout-canvas: var(--pal-neutral-900);  /* 20.3:1 AAA */
  --text-layout-canvas-subtle: var(--pal-neutral-700);  /* 9.2:1 AAA */
  --text-layout-canvas-subtler: var(--pal-neutral-600);  /* 5.5:1 AA */
  --text-layout-canvas-brand: var(--pal-blue-700);  /* 9.9:1 AAA */
  --text-layout-canvas-accent: var(--pal-teal-800);  /* 6.8:1 AA */
  --text-layout-ground: var(--text-layout-canvas);
  --text-layout-ground-subtle: var(--text-layout-canvas-subtle);
  --text-layout-ground-subtler: var(--text-layout-canvas-subtler);
  --text-layout-featured-brand-subtlest: var(--text-layout-canvas);
  --text-layout-featured-brand-subtlest-subtle: var(--text-layout-canvas-subtle);
  --text-layout-featured-brand-subtler: var(--pal-blue-900);  /* 18.6:1 AAA */
  --text-layout-featured-brand-subtler-subtle: var(--text-layout-canvas-subtle);
  --text-layout-ground-brand: var(--pal-neutral-0);  /* 10.1:1 AAA */
  --text-layout-ground-brand-subtle: var(--pal-neutral-60);  /* ~9.6:1 AAA */
  --text-layout-ground-brand-subtler: var(--pal-blue-100);  /* 9.1:1 AAA */

  /* ── TEXT — COMPONENTS ── */
  --text-components-pill: var(--text-layout-canvas);
  --text-components-pill-subtle: var(--text-layout-canvas-subtle);
  --text-components-pill-accent: var(--pal-teal-800);

  /* ── BORDER — LAYOUT ── */
  --border-layout-canvas: var(--pal-neutral-300);
  --border-layout-canvas-subtle: var(--pal-neutral-200);
  --border-layout-canvas-brand: var(--pal-blue-700);
  --border-layout-canvas-accent: var(--pal-teal-700);
  --border-layout-ground-brand: var(--pal-neutral-0);
  --border-layout-featured-brand-subtlest: var(--pal-blue-700);

  /* ── BORDER — COMPONENTS ── */
  --border-components-pill: var(--pal-neutral-250);
  --border-components-pill-accent: var(--pal-teal-800);

  /* ── BORDER — ENCODING ── */
  --border-encoding-mark-concept-2: var(--pal-blue-700);
  --border-encoding-mark-reference: var(--pal-grey-700);
  --border-encoding-mark-success: var(--ext-green-700);
  --border-encoding-mark-warning: var(--pal-gold-700);
  --border-encoding-mark-fail: var(--pal-red-700);
  --border-encoding-scale-accent-track: var(--pal-teal-200);

  /* ══ TYPOGRAPHY ══ */
  --font-primary: 'proxima-nova', system-ui, sans-serif;
  --font-secondary: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* Font sizes (figure-internal scale) */
  --fs-$description: undefined;
  --fs-label-xs: 8px;
  --fs-label-sm: 8px;
  --fs-label: 10px;
  --fs-body: 10px;
  --fs-body-lg: 11px;
  --fs-subhead: 12px;
  --fs-head: 14px;

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

  /* Line heights */
  --lh-tight: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --ls-uppercase: 0.8px;

  /* ══ SPACING ══ */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* ══ BORDER RADIUS ══ */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  /* ══ SHADOWS ══ */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.20);

  /* ══ OPACITY ══ */
  --alpha-hover: 0.85;
  --alpha-muted: 0.45;
  --alpha-faded: 0.2;
  --alpha-disabled: 0.4;

  /* ══ BREAKPOINTS ══ */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-xxl: 1536px;

  /* ══ TRANSITIONS ══ */
  --transition-fast: 120ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow: 350ms ease-out;
}