/* ============================================================================
   MerlAI Design Tokens — single source of truth
   Created 2026-10-12 (website audit). Faithful to the existing Apple-blue brand;
   NOT a redesign. Load this FIRST on every page, before any other stylesheet.

   Canonical values consolidated from homepage-styles.css, unified-theme.css,
   shared-nav-footer.css and pricing-detail-theme.css (which previously each
   re-declared the same :root block). New here: a real type scale, one
   canonical success/danger colour, and the email-brand gold as an optional
   accent for future brand reconciliation.
   ========================================================================== */
:root {
  /* ===== Brand ===== */
  --color-primary:        #0051d0;  /* canonical brand blue */
  --color-primary-dark:   #003a9b;
  --color-primary-light:  #1e40af;
  --gradient-primary:     linear-gradient(135deg, #0051d0 0%, #003a9b 100%);
  --color-brand-gold:     #c9a227;  /* email-signature gold — optional accent */

  /* Back-compat aliases (older pages reference these names for the same value) */
  --color-blue:        var(--color-primary);
  --color-blue-dark:   var(--color-primary-dark);
  --color-blue-light:  var(--color-primary-light);
  --primary:           var(--color-primary);
  --primary-dark:      var(--color-primary-dark);
  --primary-color:     var(--color-primary);
  --color-primary-color: var(--color-primary);
  --accent:            var(--color-primary);

  /* ===== Neutrals (Apple grayscale) ===== */
  --color-white: #ffffff;  --color-black: #000000;
  --color-gray-50:#f9f9f9; --color-gray-100:#f3f3f3; --color-gray-200:#e8e8ed;
  --color-gray-300:#d2d2d7;--color-gray-400:#aaaaae; --color-gray-500:#86868b;
  --color-gray-600:#6e6e73;--color-gray-700:#424245; --color-gray-800:#1d1d1f;
  --color-ink:    #1d1d1f; --color-muted:   #6e6e73;  --color-border: #d2d2d7;

  /* ===== Semantic (one each — canonical) ===== */
  --color-success: #30d158; --color-success-dark: #1c9d52;
  --color-danger:  #ff3b30; --color-danger-dark:  #b91c1c;
  --color-warning: #b45309;
  --color-info:    #0051d0;
  --color-green:   var(--color-success);

  /* ===== Typography ===== */
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;  --text-md: 1.125rem;
  --text-lg: 1.25rem;  --text-xl: 1.5rem;   --text-2xl: 2rem;   --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;
  --leading-tight: 1.15; --leading-normal: 1.5; --leading-relaxed: 1.7;

  /* ===== Spacing (existing scale, kept) ===== */
  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px;
  --space-xl:40px; --space-2xl:60px; --space-3xl:80px; --space-4xl:120px;

  /* ===== Radius (existing + canonical pill) ===== */
  --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px;
  --radius-pill:999px;

  /* ===== Shadows (existing scale, kept) ===== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.12);
  --shadow-md: 0 4px 16px rgba(0,0,0,.15);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.2);
  --shadow-xl: 0 16px 64px rgba(0,0,0,.25);
}