/* ==========================================================================
   tokens.css - Middleman Design Tokens
   tools.middleman.tv

   All CSS custom properties for the Middleman design system.
   Dark theme. Extends the core brand system with website-level tokens
   for backgrounds, typography, spacing, shadows, and transitions.

   Usage: Include this file first, before site.css and tools.css.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Brand Colors
     Core Middleman identity colors. Do not alias or override.
     -------------------------------------------------------------------------- */
  --mm-prime-blue: #00A4E4;
  --mm-pulse-orange: #F58426;
  --mm-gray-35: #232323;
  --mm-code-white: #FFFFFF;

  /* --------------------------------------------------------------------------
     Semantic Colors
     Purpose-driven aliases used throughout the UI. Components reference
     these tokens, not the raw brand colors.
     -------------------------------------------------------------------------- */
  --mm-accent: var(--mm-prime-blue);
  --mm-cta: var(--mm-pulse-orange);

  --mm-bg-primary: #0A0A0A;
  --mm-bg-secondary: #1A1A1A;
  --mm-bg-tertiary: #151515;
  --mm-bg-section-alt: #161616;

  --mm-surface: #2A2A2A;
  --mm-surface-raised: #333333;
  --mm-surface-glow: rgba(0, 164, 228, 0.05);

  --mm-text-primary: #FFFFFF;
  --mm-text-secondary: #B0B0B0;
  --mm-text-muted: #707070;

  --mm-border: #333333;
  --mm-border-accent-subtle: rgba(0, 164, 228, 0.15);

  /* --------------------------------------------------------------------------
     Status Colors
     Feedback states for parse results, validation, and alerts.
     -------------------------------------------------------------------------- */
  --mm-success: #4CAF50;
  --mm-warning: #FF9800;
  --mm-error: #F44336;
  --mm-info: var(--mm-prime-blue);

  /* --------------------------------------------------------------------------
     Typography - Font Families
     Inter is the primary typeface (loaded via Google Fonts).
     Fallback chain: system fonts for fast initial render.
     -------------------------------------------------------------------------- */
  --mm-font-heading: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mm-font-body: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mm-font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

  /* --------------------------------------------------------------------------
     Typography - Font Sizes
     Base = 1rem (16px). Scale used for body text through hero headings.
     -------------------------------------------------------------------------- */
  --mm-font-size-xs: 0.75rem;     /* 12px */
  --mm-font-size-sm: 0.875rem;    /* 14px */
  --mm-font-size-base: 1rem;      /* 16px */
  --mm-font-size-lg: 1.125rem;    /* 18px */
  --mm-font-size-xl: 1.25rem;     /* 20px */
  --mm-font-size-2xl: 1.5rem;     /* 24px */
  --mm-font-size-3xl: 1.875rem;   /* 30px */
  --mm-font-size-4xl: 2.25rem;    /* 36px */
  --mm-font-size-5xl: 3rem;       /* 48px */
  --mm-font-size-6xl: 3.75rem;    /* 60px */

  /* --------------------------------------------------------------------------
     Typography - Font Weights
     -------------------------------------------------------------------------- */
  --mm-weight-normal: 400;
  --mm-weight-medium: 500;
  --mm-weight-bold: 700;

  /* --------------------------------------------------------------------------
     Spacing
     4px base unit. Used for padding, margins, and gaps.
     -------------------------------------------------------------------------- */
  --mm-space-xs: 4px;
  --mm-space-sm: 8px;
  --mm-space-md: 16px;
  --mm-space-lg: 24px;
  --mm-space-xl: 32px;
  --mm-space-2xl: 48px;
  --mm-space-3xl: 64px;
  --mm-space-4xl: 96px;
  --mm-space-5xl: 128px;

  /* --------------------------------------------------------------------------
     Border Radius
     -------------------------------------------------------------------------- */
  --mm-radius-sm: 4px;
  --mm-radius-md: 8px;
  --mm-radius-lg: 12px;

  /* --------------------------------------------------------------------------
     Shadows
     Progressively deeper elevation. Dark theme uses heavier opacity.
     -------------------------------------------------------------------------- */
  --mm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --mm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --mm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* --------------------------------------------------------------------------
     Transitions
     Standard easing curves for interactive elements.
     -------------------------------------------------------------------------- */
  --mm-transition-fast: 150ms ease;
  --mm-transition-base: 250ms ease;
  --mm-transition-slow: 400ms ease;

  /* --------------------------------------------------------------------------
     Gradients
     Blue-to-teal gradient for accent text on hero headings.
     -------------------------------------------------------------------------- */
  --mm-gradient-text: linear-gradient(135deg, #00A4E4, #4CB7A3);
}