/*
 * MaiaCoach Design System - Variables
 * Canonical design tokens extracted from brand-book.html
 * These REPLACE the old base/_variables.css and executive/_variables.css tokens
 */

:root {
  /* ── Brand Core ── */
  --mc-primary: #1e3a5f;
  --mc-primary-light: #2a4a73;
  --mc-primary-dark: #152d4a;
  --mc-primary-darker: #0f2035;

  --mc-accent: #2dd4bf;
  --mc-accent-light: #5eead4;
  --mc-accent-dark: #14b8a6;
  --mc-accent-muted: rgba(45, 212, 191, 0.15);

  --mc-gold: #d4a853;
  --mc-gold-light: #e2c278;
  --mc-gold-dark: #b8922e;

  /* ── Feature Colors ── */
  --mc-linkedin: #0077b5;
  --mc-linkedin-light: #00a0dc;
  --mc-linkedin-dark: #005885;
  --mc-cv: #1e3a5f;
  --mc-cv-light: #2a4a73;
  --mc-cv-dark: #152d4a;
  --mc-premium: #8b5cf6;
  --mc-premium-light: #a78bfa;
  --mc-premium-dark: #7c3aed;

  /* ── Semantic ── */
  --mc-success: #10b981;
  --mc-success-light: #d1fae5;
  --mc-success-dark: #059669;
  --mc-warning: #f59e0b;
  --mc-warning-light: #fef3c7;
  --mc-warning-dark: #d97706;
  --mc-danger: #ef4444;
  --mc-danger-light: #fee2e2;
  --mc-danger-dark: #dc2626;
  --mc-info: #3b82f6;
  --mc-info-light: #dbeafe;
  --mc-info-dark: #1d4ed8;

  /* ── Neutrals ── */
  --mc-text: #1e293b;
  --mc-text-secondary: #475569;
  --mc-text-muted: #94a3b8;
  --mc-text-on-dark: #f1f5f9;
  --mc-bg: #f0f4f8;
  --mc-bg-white: #ffffff;
  --mc-bg-card: #ffffff;
  --mc-bg-hover: #f8fafc;
  --mc-border: #e2e8f0;
  --mc-border-light: #f1f5f9;
  --mc-border-strong: #cbd5e1;

  --mc-text-on-dark-muted: #94a3b8;

  /* ── Typography ── */
  --mc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mc-font-family: var(--mc-font);
  --mc-text-xs: 0.75rem;
  --mc-text-sm: 0.85rem;
  --mc-text-base: 0.95rem;
  --mc-text-lg: 1.05rem;
  --mc-text-xl: 1.2rem;
  --mc-text-2xl: 1.5rem;
  --mc-text-3xl: 1.875rem;
  --mc-text-4xl: 2.25rem;

  /* ── Spacing (4px base) ── */
  --mc-space-1: 4px;
  --mc-space-2: 8px;
  --mc-space-3: 12px;
  --mc-space-4: 16px;
  --mc-space-5: 20px;
  --mc-space-6: 24px;
  --mc-space-8: 32px;
  --mc-space-10: 40px;
  --mc-space-12: 48px;
  --mc-space-16: 64px;

  /* ── Radius ── */
  --mc-radius-sm: 8px;
  --mc-radius-md: 10px;
  --mc-radius-lg: 12px;
  --mc-radius-xl: 16px;
  --mc-radius-2xl: 20px;
  --mc-radius-full: 9999px;

  /* ── Shadows ── */
  --mc-shadow-xs: 0 1px 3px rgba(30, 58, 95, 0.06);
  --mc-shadow-sm: 0 2px 8px rgba(30, 58, 95, 0.06), 0 0 1px rgba(30, 58, 95, 0.1);
  --mc-shadow-md: 0 4px 12px rgba(30, 58, 95, 0.08);
  --mc-shadow-lg: 0 8px 24px rgba(30, 58, 95, 0.12);
  --mc-shadow-xl: 0 16px 48px rgba(30, 58, 95, 0.16);

  /* ── Transitions ── */
  --mc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mc-duration-fast: 0.15s;
  --mc-duration-base: 0.25s;
  --mc-duration-slow: 0.4s;

  /* ── Z-Index ── */
  --mc-z-dropdown: 1000;
  --mc-z-sticky: 1020;
  --mc-z-fixed: 1030;
  --mc-z-modal-backdrop: 1040;
  --mc-z-modal: 1050;
  --mc-z-tooltip: 1070;
}

/* Global font family */
html, body {
  font-family: var(--mc-font);
  color: var(--mc-text);
  line-height: 1.5;
}