/* ============================================
   Design Tokens: resend
   Scheme: dark | Accent: #00A3FF | Font: domaine
   Scraped: 2026-04-10 via Firecrawl
   ============================================ */

:root {
  /* === COLOR SCALE === */
  --color-black: #000000;
  --color-charcoal: #0A0A0A;
  --color-dark-gray: #1A1A1A;
  --color-mid-dark: #262626;
  --color-light-gray: #333333;
  --color-gray: #666666;
  --color-medium-gray: #999999;
  --color-silver: #CCCCCC;
  --color-off-white: #F5F5F5;
  --color-white: #FFFFFF;

  /* === ACCENT (MZM-626: monochromatic v3 — neutralized from blue) === */
  --color-accent: #FFFFFF;
  --color-accent-light: rgba(255, 255, 255, 0.12);
  --color-accent-muted: rgba(255, 255, 255, 0.5);

  /* === SEMANTIC COLORS === */
  --bg: #000000;
  --bg-surface: #141418;
  --bg-card: transparent;
  --bg-card-hover: rgba(255, 255, 255, 0.02);
  --bg-elevated: rgba(255, 255, 255, 0.03);

  --text-primary: #FFFFFF;
  --text-secondary: #94949C;
  --text-muted: #7A7A7A;        /* MZM-363: bumped from #666 to pass WCAG AA (4.6:1) */
  --text-caption: #858585;

  --border: #2A2A30;
  --border-strong: #3A3A40;
  --divider: #1E1E22;

  /* MZM-626: monochromatic accent — white replaces blue #00A3FF */
  --accent: #FFFFFF;
  --accent-foreground: #000000;

  --success: #C8C8C8;
  --success-light: rgba(255, 255, 255, 0.06);
  --error: #E5E5E5;
  --error-light: rgba(255, 255, 255, 0.06);
  --warning: #B8B8B8;
  --warning-light: rgba(255, 255, 255, 0.06);
  --info: #FFFFFF;
  --info-light: rgba(255, 255, 255, 0.08);
  --purple: #B0B0B0;

  /* Badge colors (neutralized) */
  --badge-error: #E5E5E5;
  --badge-error-bg: rgba(255, 255, 255, 0.08);
  --badge-success: #F5F5F5;
  --badge-success-bg: rgba(255, 255, 255, 0.08);
  --badge-info-bg: rgba(255, 255, 255, 0.08);

  /* Glow border tokens */
  --glow-border: rgba(255, 255, 255, 0.08);
  --glow-border-hover: rgba(255, 255, 255, 0.14);
  --glow-border-subtle: rgba(255, 255, 255, 0.06);
  --glow-border-strong: rgba(255, 255, 255, 0.1);
  --glow-border-strongest: rgba(255, 255, 255, 0.18);
  --glow-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.04);
  --glow-shadow-hover: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --glow-fill-subtle: rgba(255, 255, 255, 0.06);
  --glow-fill-hover: rgba(255, 255, 255, 0.1);
  --decision-number: rgba(255, 255, 255, 0.15);

  /* === MZM-626: v3 button system tokens === */
  --btn-radius: 6px;
  --btn-padding-y: 12px;
  --btn-padding-x: 22px;
  --btn-primary-bg: #1A1A1F;
  --btn-primary-bg-hover: #26262C;
  --btn-primary-text: #FFFFFF;
  --btn-primary-border: rgba(255, 255, 255, 0.12);
  --btn-primary-border-hover: rgba(255, 255, 255, 0.22);
  --btn-secondary-text: #999999;
  --btn-secondary-text-hover: #FFFFFF;
  --btn-chevron-offset: 6px;

  /* === TYPOGRAPHY === */
  --font-display: 'domaine', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 1rem;
  --text-base: 18px;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2rem;
  --text-3xl: 56px;
  --text-4xl: 96px;

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.1em;

  /* === SPACING SCALE === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  --section-gap: 96px;
  --section-gap-lg: 96px;
  --section-padding-x: 120px;
  --section-padding-y: 96px;

  /* === BORDER RADIUS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* === TRANSITIONS === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* === LAYOUT === */
  --max-width: 1440px;
  --content-width: 1120px;
  --narrow-width: 680px;
}

@media (max-width: 1024px) {
  :root {
    --section-padding-x: 48px;
    --section-padding-y: 64px;
    --section-gap: 64px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding-x: 24px;
    --section-padding-y: 48px;
    --section-gap: 48px;
  }
}

::selection {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}