/**
 * IQExit Design Tokens
 * ====================
 * CSS Custom Properties for consistent styling across the application.
 * Based on Webflow marketing site design system.
 *
 * Reference: docs/DESIGN_TOKENS.md
 * Created: 2024-12-14 (v2.0.0 refactor)
 */

:root {
  /* ===== Typography ===== */
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.75;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===== Colors - Text ===== */
  --color-text-primary: #1a1b1f;
  --color-text-secondary: #548192;
  --color-text-muted: #7f8c8d;
  --color-text-hover: #32343a;
  --color-text-active: #43464d;

  /* Legacy text colors (for gradual migration) */
  --color-text-dark: #2c3e50;
  --color-text-body: #333;

  /* ===== Colors - Brand (from logo) ===== */
  --color-brand-navy: #1B2B4B;
  --color-brand-cyan: #2D9CDB;
  --color-brand-cyan-hover: #2589C4;
  --color-brand-cyan-light: #E8F4FC;

  /* Primary action color - use cyan for buttons/links */
  --color-primary: var(--color-brand-cyan);
  --color-primary-hover: var(--color-brand-cyan-hover);

  /* Legacy - keeping for gradual migration, prefer --color-primary */
  --color-brand-primary: #2D9CDB;
  --color-brand-accent: #2D9CDB;
  --color-brand-gradient-start: #2D9CDB;
  --color-brand-gradient-end: #1B2B4B;
  --color-blue-primary: #2D9CDB;
  --color-blue-hover: #2589C4;

  /* ===== Colors - Status ===== */
  --color-success: #12b878;
  --color-success-legacy: #27ae60;
  --color-error: #db4b68;
  --color-error-legacy: #e74c3c;
  --color-error-hover: #c0392b;
  --color-warning: #f39c12;

  /* ===== Colors - Background ===== */
  --color-bg-page: #f4f4f4;
  --color-bg-page-legacy: #f8f9fa;
  --color-bg-section: #f0f5f7;
  --color-bg-white: #ffffff;
  --color-bg-dark: #34495e;

  /* ===== Colors - Border ===== */
  --color-border-light: #eee;
  --color-border-medium: #e2e2e2;
  --color-border-input: #bdc3c7;
  --color-border-focus: var(--color-blue-primary);

  /* ===== Spacing ===== */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 40px;

  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-round: 50%;

  /* ===== Shadows ===== */
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.12);

  /* ===== Transitions ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* ===== Container Widths ===== */
  --container-sm: 800px;
  --container-md: 1000px;
  --container-lg: 1200px;
}