/* Valtura Marketing v2 — design tokens
 * All tokens namespaced with --mr- to avoid collisions with v1 site-styles.css.
 * Brand direction: extend navy + teal, add neutral ramp, controlled amber accent.
 */

:root {
  /* ---------- Brand: navy ---------- */
  --mr-navy-900: #0A1B2D;     /* deepest — modal scrims, big dark bands */
  --mr-navy-800: #0B1F33;     /* primary navy */
  --mr-navy-700: #122E45;     /* mid navy — gradient stop */
  --mr-navy-600: #162D45;     /* dark UI surfaces */
  --mr-navy-500: #2F3A44;     /* slate-grey emphasis */

  /* ---------- Brand: teal accent (Phase mktteal.1) ----------
   * Lewis, 28 Aug 2026, reversing mktnavy.1's "marketing leads blue": the
   * marketing site mirrors the PRODUCT the trial hands over to — the portal
   * is navy-dominant with white surfaces and TEAL as the accent, so the
   * site is too. Navy bands and grounds are untouched; only the accent
   * family changes. The values are the platform's own deep-teal ramp, not
   * the old light teal whose CTA failed contrast.
   *
   * Contrast, measured (scripts run 28 Aug): 700 ~9:1 on white ·
   * 600 7.51:1 on white · 500 5.47:1 with white text and as link text on
   * white · 400 4.53:1 on navy · 300 8.55:1 on navy. All AA — the failure
   * mktnavy.1 fixed (old #2C7A7B CTA at 3.79:1) does not return.
   */
  --mr-teal-700: #0E4A43;     /* ink — body emphasis on light */
  --mr-teal-600: #0C5F59;     /* hover */
  --mr-teal-500: #0F766E;     /* primary CTA, links */
  --mr-teal-400: #14958B;     /* hover-on-dark, links on navy */
  --mr-teal-300: #7CC7BC;     /* headline accent on navy */
  --mr-teal-100: #D9EDEA;     /* badge backgrounds */
  --mr-teal-050: #ECF5F3;     /* faint card wash */

  /* ---------- Legacy blue names → teal ----------
   * DEPRECATED NAMES, LIVE VALUES — the mktnavy.1 trick, run in reverse.
   * Newer code referenced --mr-blue-* (32 call sites); aliasing them here
   * recolours every one in a diff that reverts cleanly. Use --mr-teal-*
   * in new code.
   */
  --mr-blue-700: var(--mr-teal-700);
  --mr-blue-600: var(--mr-teal-600);
  --mr-blue-500: var(--mr-teal-500);
  --mr-blue-400: var(--mr-teal-400);
  --mr-blue-300: var(--mr-teal-300);
  --mr-blue-100: var(--mr-teal-100);
  --mr-blue-050: var(--mr-teal-050);

  /* ---------- Warm accent (controlled) ---------- */
  --mr-amber-700: #B45309;
  --mr-amber-500: #D97706;
  --mr-amber-100: #FEF3C7;

  /* ---------- Neutrals (50–900) ---------- */
  --mr-gray-050: #F8FAFC;
  --mr-gray-100: #F1F5F9;
  --mr-gray-200: #E2E8F0;
  --mr-gray-300: #CBD5E1;
  --mr-gray-400: #94A3B8;
  --mr-gray-500: #64748B;
  --mr-gray-600: #475569;
  --mr-gray-700: #334155;
  --mr-gray-800: #1E293B;
  --mr-gray-900: #0F172A;
  --mr-white: #FFFFFF;

  /* ---------- Surfaces ---------- */
  --mr-surface-page: var(--mr-white);
  --mr-surface-tinted: #F8FBFC;       /* slightly cool to pair with navy */
  --mr-surface-raised: var(--mr-white);
  --mr-surface-dark: var(--mr-navy-800);
  --mr-surface-dark-elevated: var(--mr-navy-700);
  --mr-surface-glass: rgba(255, 255, 255, 0.78);
  --mr-surface-glass-dark: rgba(11, 31, 51, 0.72);

  /* ---------- Text ---------- */
  --mr-text-primary: var(--mr-navy-800);
  --mr-text-secondary: var(--mr-navy-500);
  --mr-text-muted: var(--mr-gray-500);
  --mr-text-subtle: var(--mr-gray-400);
  --mr-text-on-dark: var(--mr-white);
  --mr-text-on-dark-muted: rgba(255, 255, 255, 0.65);
  --mr-text-on-dark-subtle: rgba(255, 255, 255, 0.45);
  --mr-text-link: var(--mr-teal-500);
  --mr-text-link-hover: var(--mr-teal-700);

  /* ---------- Borders ---------- */
  --mr-border-subtle: var(--mr-gray-200);
  --mr-border-default: var(--mr-gray-300);
  --mr-border-strong: var(--mr-gray-400);
  --mr-border-on-dark: rgba(255, 255, 255, 0.10);
  --mr-border-on-dark-strong: rgba(255, 255, 255, 0.18);
  --mr-border-focus: var(--mr-teal-500);

  /* ---------- Semantic ---------- */
  --mr-success-700: #15803D;
  --mr-success-500: #16A34A;
  --mr-success-100: #DCFCE7;
  --mr-warning-700: #92400E;
  --mr-warning-500: #D97706;
  --mr-warning-100: #FEF3C7;
  --mr-error-700: #991B1B;
  --mr-error-500: #DC2626;
  --mr-error-100: #FEE2E2;
  --mr-info-700: #0369A1;
  --mr-info-500: #0284C7;
  --mr-info-100: #E0F2FE;

  /* ---------- Type ---------- */
  --mr-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mr-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --mr-fs-eyebrow: 0.6875rem;                                          /* 11px */
  --mr-fs-caption: 0.75rem;                                            /* 12px */
  --mr-fs-body-sm: 0.875rem;                                           /* 14px */
  --mr-fs-body: 1rem;                                                  /* 16px */
  --mr-fs-body-lg: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
  --mr-fs-h6: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --mr-fs-h5: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --mr-fs-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --mr-fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --mr-fs-h2: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --mr-fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  --mr-fs-display: clamp(3rem, 2.2rem + 3.4vw, 4.5rem);

  --mr-fw-regular: 400;
  --mr-fw-medium: 500;
  --mr-fw-semi: 600;
  --mr-fw-bold: 700;

  --mr-lh-tight: 1.15;
  --mr-lh-snug: 1.25;
  --mr-lh-heading: 1.35;
  --mr-lh-body: 1.65;
  --mr-lh-loose: 1.8;

  --mr-tr-display: -0.035em;
  --mr-tr-h1: -0.03em;
  --mr-tr-h2: -0.025em;
  --mr-tr-h3: -0.02em;
  --mr-tr-body: -0.005em;
  --mr-tr-eyebrow: 0.12em;
  --mr-tr-label: 0.06em;

  /* ---------- Spacing (4px base) ---------- */
  --mr-space-0: 0;
  --mr-space-1: 4px;
  --mr-space-2: 8px;
  --mr-space-3: 12px;
  --mr-space-4: 16px;
  --mr-space-5: 20px;
  --mr-space-6: 24px;
  --mr-space-7: 32px;
  --mr-space-8: 40px;
  --mr-space-9: 48px;
  --mr-space-10: 56px;
  --mr-space-11: 64px;
  --mr-space-12: 80px;
  --mr-space-13: 96px;
  --mr-space-14: 120px;
  --mr-space-15: 160px;

  /* ---------- Layout ---------- */
  --mr-container-narrow: 720px;
  --mr-container-prose: 860px;
  --mr-container-default: 1180px;
  --mr-container-wide: 1320px;
  --mr-container-pad-x: 32px;
  --mr-container-pad-x-md: 24px;
  --mr-container-pad-x-sm: 16px;

  /* ---------- Radius ---------- */
  --mr-radius-xs: 4px;
  --mr-radius-sm: 6px;
  --mr-radius-md: 10px;
  --mr-radius-lg: 14px;
  --mr-radius-xl: 20px;
  --mr-radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --mr-shadow-xs: 0 1px 2px rgba(11, 31, 51, 0.04);
  --mr-shadow-sm: 0 2px 8px rgba(11, 31, 51, 0.06), 0 0 1px rgba(11, 31, 51, 0.04);
  --mr-shadow-md: 0 4px 16px rgba(11, 31, 51, 0.08), 0 0 2px rgba(11, 31, 51, 0.04);
  --mr-shadow-lg: 0 8px 32px rgba(11, 31, 51, 0.10);
  --mr-shadow-xl: 0 24px 60px rgba(11, 31, 51, 0.16);
  --mr-shadow-elevated: 0 28px 70px rgba(11, 31, 51, 0.14);
  --mr-shadow-glow-teal: 0 0 0 4px rgba(15, 118, 110, 0.16);
  --mr-shadow-glow-amber: 0 0 0 4px rgba(217, 119, 6, 0.20);
  --mr-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ---------- Motion ---------- */
  --mr-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --mr-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --mr-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --mr-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --mr-dur-instant: 100ms;
  --mr-dur-short: 180ms;
  --mr-dur-medium: 280ms;
  --mr-dur-long: 520ms;
  --mr-dur-hero: 700ms;
  --mr-dur-slow: 1200ms;

  /* ---------- Z-index ---------- */
  --mr-z-base: 0;
  --mr-z-raised: 10;
  --mr-z-sticky: 90;
  --mr-z-overlay: 100;
  --mr-z-nav: 1000;
  --mr-z-mobile-nav: 1001;
  --mr-z-cookie: 1200;
  --mr-z-modal-bd: 1300;
  --mr-z-modal: 1310;
  --mr-z-toast: 1400;
  --mr-z-tooltip: 1500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mr-dur-instant: 0ms;
    --mr-dur-short: 0ms;
    --mr-dur-medium: 0ms;
    --mr-dur-long: 0ms;
    --mr-dur-hero: 0ms;
    --mr-dur-slow: 0ms;
  }
}