/* Auto-generated from /brand/tokens.json by scripts/brand-sync.py. Do not edit directly. */
/* Source version: 0.2.0 */
/* Colors + type-scale CSS variables. Font files declared in tokens-fonts.css. */

:root {
  /* Primitives — raw brand palette. Prefer semantic tokens below. */
  --color-brand-obsidian-grid: #080a0f;
  --color-brand-neural-blue: #1e293b;
  --color-brand-oceanic-deep-teal: #053a3e;
  --color-brand-matrix-steel: #94a3b8;
  --color-brand-cyber-teal: #0d9488;
  --color-brand-cyan-pulse: #38bdf8;
  --color-brand-zero-trust-white: #f8fafc;

  /* Semantic — reference these in product and website code. */
  --color-bg-primary: var(--color-brand-obsidian-grid);
  --color-bg-secondary: var(--color-brand-neural-blue);
  --color-bg-accent: var(--color-brand-oceanic-deep-teal);
  --color-text-primary: var(--color-brand-matrix-steel);
  --color-text-secondary: var(--color-brand-zero-trust-white);
  --color-text-inverse: var(--color-brand-obsidian-grid);
  --color-icon-primary: var(--color-brand-cyber-teal);
  --color-icon-secondary: var(--color-brand-cyan-pulse);
  --color-icon-muted: var(--color-brand-neural-blue);
  --color-accent-primary: var(--color-brand-cyber-teal);
  --color-border-default: var(--color-brand-neural-blue);

  /* Typography families */
  --font-family-display: 'Michroma', Arial, sans-serif;
  --font-family-primary: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Typography scale — one variable set per style */
  --font-size-display: 56px;
  --line-height-display: 64px;
  --letter-spacing-display: 4px;
  --font-weight-display: 400;
  --font-family-style-display: var(--font-family-display);
  --font-size-heading-h1: 40px;
  --line-height-heading-h1: 48px;
  --letter-spacing-heading-h1: 2px;
  --font-weight-heading-h1: 400;
  --font-family-style-heading-h1: var(--font-family-display);
  --font-size-heading-h2: 32px;
  --line-height-heading-h2: 40px;
  --letter-spacing-heading-h2: -0.3px;
  --font-weight-heading-h2: 700;
  --font-family-style-heading-h2: var(--font-family-primary);
  --font-size-heading-h3: 24px;
  --line-height-heading-h3: 32px;
  --letter-spacing-heading-h3: -0.2px;
  --font-weight-heading-h3: 700;
  --font-family-style-heading-h3: var(--font-family-primary);
  --font-size-heading-h4: 20px;
  --line-height-heading-h4: 28px;
  --letter-spacing-heading-h4: 0px;
  --font-weight-heading-h4: 500;
  --font-family-style-heading-h4: var(--font-family-primary);
  --font-size-body-large: 18px;
  --line-height-body-large: 28px;
  --letter-spacing-body-large: 0px;
  --font-weight-body-large: 400;
  --font-family-style-body-large: var(--font-family-primary);
  --font-size-body-default: 16px;
  --line-height-body-default: 24px;
  --letter-spacing-body-default: 0px;
  --font-weight-body-default: 400;
  --font-family-style-body-default: var(--font-family-primary);
  --font-size-label: 14px;
  --line-height-label: 20px;
  --letter-spacing-label: 0.1px;
  --font-weight-label: 500;
  --font-family-style-label: var(--font-family-primary);
  --font-size-caption: 12px;
  --line-height-caption: 16px;
  --letter-spacing-caption: 0.2px;
  --font-weight-caption: 300;
  --font-family-style-caption: var(--font-family-primary);
}