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

:root {
  --br-background: #09090b;
  --br-surface-1: color-mix(in srgb, #18181b 40%, transparent);
  --br-surface-2: #18181b;
  --br-surface-3: #27272a;
  --br-surface-glass: rgba(24, 24, 27, 0.4);

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

  --br-primary: #10b981;
  --br-primary-hover: #34d399;
  --br-primary-soft: color-mix(in srgb, var(--br-primary) 10%, transparent);
  --br-primary-ring: color-mix(in srgb, var(--br-primary) 20%, transparent);
  --br-primary-ink: #09090b;

  --br-secondary: #0891b2;
  --br-secondary-bright: #06b6d4;

  --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: #71717a;
  --br-text-faint: #52525b;

  --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-primary) 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 var(--br-primary);
}