/* Canonical Blackroot design tokens. Source: docs/design.md */

:root {
  --br-black-deep: #070707;
  --br-black: #09090b;
  --br-black-elevated: #0c0c0c;
  --br-graphite-deep: #111111;
  --br-graphite: #181818;
  --br-gray-dark: #262626;
  --br-glow-mid: #3a3a3a;
  --br-wave-highlight: #464646;
  --br-wave-highlight-strong: #5f5f5f;

  --br-background: var(--br-black);
  --br-surface-1: color-mix(in srgb, var(--br-graphite-deep) 40%, transparent);
  --br-surface-2: var(--br-graphite);
  --br-surface-3: var(--br-gray-dark);
  --br-surface-glass: color-mix(in srgb, var(--br-graphite) 40%, transparent);

  --br-border-subtle: rgba(255, 255, 255, 0.05);
  --br-border-default: var(--br-gray-dark);
  --br-border-strong: color-mix(in srgb, #ffffff 10%, transparent);

  --br-primary: var(--br-glow-mid);
  --br-primary-hover: var(--br-wave-highlight-strong);
  --br-primary-soft: color-mix(in srgb, var(--br-wave-highlight) 18%, transparent);
  --br-primary-ring: color-mix(in srgb, var(--br-wave-highlight-strong) 72%, transparent);
  --br-primary-ink: #fafafa;
  --br-primary-text: #d4d4d4;

  --br-secondary: var(--br-wave-highlight);
  --br-secondary-bright: var(--br-wave-highlight-strong);

  --br-success: #10b981;
  --br-success-bright: #34d399;
  --br-success-soft: color-mix(in srgb, var(--br-success) 10%, transparent);

  --br-danger: color-mix(in srgb, #f43f5e 90%, transparent);
  --br-warning: color-mix(in srgb, #f59e0b 90%, transparent);

  --br-text-primary: #fafafa;
  --br-text-heading: #f4f4f5;
  --br-text-body: #e4e4e7;
  --br-text-secondary: #a1a1aa;
  --br-text-muted: #a1a1aa;
  --br-text-faint: #9b9ba4;

  --br-font-sans: "Inter Tight", system-ui, -apple-system, sans-serif;
  --br-font-mono: "Space Mono", ui-monospace, monospace;

  --br-weight-normal: 400;
  --br-weight-medium: 500;
  --br-weight-semibold: 600;
  --br-weight-bold: 700;

  --br-tracking-tight: -0.025em;
  --br-tracking-tighter: -0.05em;
  --br-tracking-wide: 0.08em;
  --br-tracking-widest: 0.16em;

  --br-space-xs: 4px;
  --br-space-sm: 8px;
  --br-space-md: 16px;
  --br-space-lg: 24px;
  --br-space-xl: 32px;
  --br-space-2xl: 48px;
  --br-space-3xl: 64px;
  --br-space-hero: 128px;

  --br-radius-sm: 4px;
  --br-radius-md: 8px;
  --br-radius-lg: 12px;
  --br-radius-xl: 16px;
  --br-radius-full: 9999px;

  --br-highlight-soft: inset 0 1px 1px rgba(255, 255, 255, 0.04);
  --br-highlight-faint: inset 0 1px 1px rgba(255, 255, 255, 0.02);
  --br-highlight-strong: inset 0 1px 1px rgba(255, 255, 255, 0.4);

  --br-shadow-status: 0 0 8px color-mix(in srgb, var(--br-success) 40%, transparent);
  --br-shadow-card: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
  --br-shadow-pricing: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --br-shadow-cta: 0 8px 24px color-mix(in srgb, var(--br-primary) 20%, transparent);
  --br-shadow-button: 0 4px 16px color-mix(in srgb, var(--br-primary) 15%, transparent);

  --br-container: 80rem;
  --br-container-preview: 72rem;
  --br-container-cta: 56rem;
  --br-container-copy: 48rem;
  --br-container-price: 28rem;

  --br-nav-height: 4rem;
  --br-ease: ease-in-out;
  --br-duration: 180ms;

  --br-focus-ring: 0 0 0 2px var(--br-background), 0 0 0 4px #a7c7ff;
}