/*
 * GENERATED FILE — DO NOT EDIT.
 *
 * Source: synthetic-smarts/design/DESIGN.md
 * Generator: synsmarts-www/scripts/generate-design-tokens.mjs
 * Regenerate: `npm run tokens:generate` (also runs on dev/build/test).
 *
 * Tokens are extracted from the DESIGN.md frontmatter by
 * @google/design.md export --format css-tailwind, then the v4-specific
 * `@theme {}` wrapper is rewritten to a plain `:root {}` block so
 * the CSS custom properties bind in a non-Tailwind Astro context.
 *
 * public/style.css imports this file at the top of the cascade. The
 * existing GitHub-derived alias tokens (--color-canvas-default,
 * --color-fg-default, etc.) coexist with these canonical tokens as
 * compatibility aliases until per-page CSS migrates to canonical
 * names.
 *
 * Surface code references canonical tokens — never inline hex
 * (design/DESIGN.md HC + CLAUDE.md Design System HC).
 */
:root {
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-container: #f6f7f9;
  --color-surface-container-high: #f0f1f4;
  --color-surface-sunken: #ecedf3;
  --color-on-surface: #15181e;
  --color-on-surface-variant: #404759;
  --color-on-surface-muted: #6b7694;
  --color-outline: #e1e4ea;
  --color-outline-variant: #889caa;
  --color-primary: #5b21b6;
  --color-on-primary: #ffffff;
  --color-primary-hover: #4c1a99;
  --color-primary-bright: #8952e0;
  --color-primary-container: #e2d4f7;
  --color-on-primary-container: #5b21b6;
  --color-primary-deep: #2b1056;
  --color-primary-deepest: #16082b;
  --color-secondary: #1d4ed8;
  --color-on-secondary: #ffffff;
  --color-tag: #1d4ed8;
  --color-on-tag: #ffffff;
  --color-error: #d9564c;
  --color-error-fill: #f4cfcd;
  --color-error-border: #d85046;
  --color-error-text: #962922;
  --color-success: #1b9e6c;
  --color-success-fill: #cbf6e6;
  --color-success-border: #199062;
  --color-success-text: #0a5c3d;
  --color-warning: #d98a1f;
  --color-warning-fill: #f7e4c9;
  --color-warning-border: #ae6f19;
  --color-warning-dot: #cd831d;
  --color-warning-text: #744911;
  --color-info: #4a93c4;
  --color-info-fill: #d1e3f0;
  --color-info-border: #3b84b5;
  --color-info-text: #225577;
  --color-neutral: #8a8a8a;
  --color-status-live: #1ed760;
  --color-signal-cyan: #19e5ff;
  --color-signal-mint: #6bf0b5;
  --color-signal-amber: #ffb547;
  --color-signal-rose: #ff6b8b;
  --color-canvas-dark: #0a1020;
  --font-display-lg: "DM Sans Variable";
  --font-display-md: "DM Sans Variable";
  --font-headline-lg: "DM Sans Variable";
  --font-headline-md: "DM Sans Variable";
  --font-title-md: "DM Sans Variable";
  --font-body-lg: "DM Sans Variable";
  --font-body-md: "DM Sans Variable";
  --font-body-sm: "DM Sans Variable";
  --font-label-md: "DM Sans Variable";
  --font-label-sm: "DM Sans Variable";
  --font-eyebrow: "DM Sans Variable";
  --font-eyebrow-pill: "DM Sans Variable";
  --font-button: "DM Sans Variable";
  --font-code-md: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
  --font-code-sm: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
  --text-display-lg: 60px;
  --text-display-md: 46px;
  --text-headline-lg: 36px;
  --text-headline-md: 28px;
  --text-title-md: 22px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-label-md: 14px;
  --text-label-sm: 12px;
  --text-eyebrow: 14px;
  --text-eyebrow-pill: 14px;
  --text-button: 18px;
  --text-code-md: 14px;
  --text-code-sm: 12px;
  --leading-display-lg: 58px;
  --leading-display-md: 46px;
  --leading-headline-lg: 44px;
  --leading-headline-md: 36px;
  --leading-title-md: 30px;
  --leading-body-lg: 22px;
  --leading-body-md: 26px;
  --leading-body-sm: 24px;
  --leading-label-md: 18px;
  --leading-label-sm: 16px;
  --leading-eyebrow: 20px;
  --leading-eyebrow-pill: 20px;
  --leading-button: 22px;
  --leading-code-md: 22px;
  --leading-code-sm: 18px;
  --tracking-display-lg: -0.01em;
  --tracking-display-md: -0.01em;
  --tracking-headline-lg: -0.01em;
  --tracking-headline-md: -0.01em;
  --tracking-title-md: -0.02em;
  --tracking-body-lg: -0.02em;
  --tracking-body-sm: -0.02em;
  --tracking-label-md: -0.02em;
  --tracking-eyebrow: 0.14em;
  --font-weight-display-lg: 900;
  --font-weight-display-md: 700;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-title-md: 700;
  --font-weight-body-lg: 400;
  --font-weight-body-md: 400;
  --font-weight-body-sm: 400;
  --font-weight-label-md: 700;
  --font-weight-label-sm: 700;
  --font-weight-eyebrow: 700;
  --font-weight-eyebrow-pill: 700;
  --font-weight-button: 700;
  --font-weight-code-md: 400;
  --font-weight-code-sm: 400;
  --radius-sm: 0.25rem;
  --radius-DEFAULT: 0.5rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 999px;
  --spacing-unit: 8px;
  --spacing-container-padding: 16px;
  --spacing-container-padding-md: 24px;
  --spacing-card-gap: 24px;
  --spacing-section-margin: 80px;
  --spacing-card-padding: 24px;
}