/*
 * MaiaWay Design System — Tokens (Brand Book v3, product UI edition)
 *
 * Source of truth: brand_pages/brand-book-v3.html ("Tokens" section).
 * Names are kept from v2 so existing components pick up the new values;
 * the legacy aliases at the bottom map old names onto the v3 scale and are
 * removed as screens migrate to the mw- components.
 */

:root {
  /* ── Logo colors ── */
  --mc-teal: #6AC5C0;
  --mc-ocean: #489AB8;
  --mc-blue: #3273BF;
  --mc-indigo: #7068B5;
  --mc-purple: #68439F;

  /* ── Roles ── */
  --mc-primary: #3273BF;
  --mc-primary-hover: #2A63A8;
  --mc-primary-active: #1A5299;
  --mc-primary-soft: rgba(50, 115, 191, 0.10);
  --mc-primary-ring: rgba(50, 115, 191, 0.28);

  --mc-ink: #0F3566;
  --mc-ink-deep: #0A2247;
  --mc-ink-soft: rgba(15, 53, 102, 0.08);

  --mc-accent: #6AC5C0;
  --mc-accent-dark: #3E9B95;
  --mc-accent-soft: rgba(106, 197, 192, 0.18);

  --mc-maia: #68439F;
  --mc-maia-soft: rgba(104, 67, 159, 0.10);

  --mc-gold: #D4A853;
  --mc-gold-dark: #B8922E;
  --mc-gold-soft: rgba(212, 168, 83, 0.16);

  /* ── Feature colors ── */
  --mc-linkedin: #0077b5;
  --mc-linkedin-light: #00a0dc;
  --mc-linkedin-dark: #005885;
  --mc-cv: var(--mc-ink);
  --mc-cv-light: var(--mc-primary-active);
  --mc-cv-dark: var(--mc-ink-deep);
  --mc-premium: var(--mc-maia);
  --mc-premium-light: #7068B5;
  --mc-premium-dark: #522F82;

  /* ── Semantic ── */
  --mc-success: #2D9F7F;
  --mc-success-text: #1F7A5E;
  --mc-success-soft: rgba(45, 159, 127, 0.13);
  --mc-warning: #E5A330;
  --mc-warning-text: #9A6A12;
  --mc-warning-soft: rgba(229, 163, 48, 0.16);
  --mc-danger: #D94052;
  --mc-danger-text: #B02F40;
  --mc-danger-soft: rgba(217, 64, 82, 0.12);
  --mc-info: #489AB8;
  --mc-info-text: #2F7A96;
  --mc-info-soft: rgba(72, 154, 184, 0.14);

  /* ── Neutrals (cool, navy-biased) ── */
  --mc-text: #1B2838;
  --mc-text-2: #4A5A6E;
  --mc-text-3: #7C8A9C;
  --mc-text-on-dark: #F1F5F9;
  --mc-text-on-dark-2: rgba(241, 245, 249, 0.68);
  --mc-ground: #F4F6F9;
  --mc-paper: #FAF8F3;
  --mc-surface: #FFFFFF;
  --mc-surface-2: #F7F9FC;
  --mc-surface-dark: #0F3566;
  --mc-line: #E3E8EF;
  --mc-line-strong: #C9D2DE;

  /* ── Typography ── */
  --mc-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mc-font-family: var(--mc-font);
  --mc-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --mc-fs-12: 12px;
  --mc-fs-13: 13px;
  --mc-fs-14: 14px;
  --mc-fs-15: 15px;
  --mc-fs-17: 17px;
  --mc-fs-20: 20px;
  --mc-fs-24: 24px;
  --mc-fs-30: 30px;

  /* ── Spacing (4px base) ── */
  --mc-s1: 4px;
  --mc-s2: 8px;
  --mc-s3: 12px;
  --mc-s4: 16px;
  --mc-s5: 20px;
  --mc-s6: 24px;
  --mc-s8: 32px;
  --mc-s10: 40px;
  --mc-s12: 48px;

  /* ── Radius ── */
  --mc-r-control: 6px;
  --mc-r-card: 8px;
  --mc-r-panel: 12px;
  --mc-r-pill: 999px;

  /* ── Elevation ── */
  --mc-shadow-md: 0 4px 16px rgba(15, 53, 102, 0.10), 0 1px 3px rgba(15, 53, 102, 0.06);
  --mc-shadow-lg: 0 16px 40px rgba(15, 53, 102, 0.16), 0 2px 6px rgba(15, 53, 102, 0.06);

  /* ── Layout ── */
  --mc-sidebar-w: 240px;
  --mc-topbar-h: 60px;
  --mc-mobilebar-h: 56px;
  --mc-content-pad: 28px;
  --mc-w-reading: 800px;
  --mc-w-working: 1200px;

  /* ── Motion ── */
  --mc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mc-fast: 120ms;
  --mc-base: 200ms;
  --mc-duration-fast: var(--mc-fast);
  --mc-duration-base: var(--mc-base);
  --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;

  /* ════════════════════════════════════════════════════════════════════
     LEGACY ALIASES (v2 names → v3 values). Delete as screens migrate.
     ════════════════════════════════════════════════════════════════════ */
  --mc-primary-light: #4A8DD4;
  --mc-primary-dark: var(--mc-primary-active);
  --mc-primary-darker: var(--mc-ink);
  --mc-accent-light: #8FD8D4;
  --mc-accent-muted: var(--mc-accent-soft);
  --mc-gold-light: #E2C278;

  --mc-success-light: var(--mc-success-soft);
  --mc-success-dark: var(--mc-success-text);
  --mc-warning-light: var(--mc-warning-soft);
  --mc-warning-dark: var(--mc-warning-text);
  --mc-danger-light: var(--mc-danger-soft);
  --mc-danger-dark: var(--mc-danger-text);
  --mc-info-light: var(--mc-info-soft);
  --mc-info-dark: var(--mc-info-text);

  --mc-text-secondary: var(--mc-text-2);
  --mc-text-muted: var(--mc-text-3);
  --mc-text-on-dark-muted: var(--mc-text-on-dark-2);
  --mc-bg: var(--mc-ground);
  --mc-bg-white: var(--mc-surface);
  --mc-bg-card: var(--mc-surface);
  --mc-bg-hover: var(--mc-surface-2);
  --mc-border: var(--mc-line);
  --mc-border-light: #EEF2F6;
  --mc-border-strong: var(--mc-line-strong);

  --mc-text-xs: 12px;
  --mc-text-sm: 13px;
  --mc-text-base: 15px;
  --mc-text-lg: 17px;
  --mc-text-xl: 20px;
  --mc-text-2xl: 24px;
  --mc-text-3xl: 30px;
  --mc-text-4xl: 36px;

  --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;

  --mc-radius-sm: var(--mc-r-control);
  --mc-radius-md: var(--mc-r-card);
  --mc-radius-lg: var(--mc-r-card);
  --mc-radius-xl: var(--mc-r-panel);
  --mc-radius-2xl: var(--mc-r-panel);
  --mc-radius-full: var(--mc-r-pill);

  --mc-shadow-xs: 0 1px 2px rgba(15, 53, 102, 0.05);
  --mc-shadow-sm: 0 1px 3px rgba(15, 53, 102, 0.06);
  --mc-shadow-xl: var(--mc-shadow-lg);
}

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