/*
 * CAH Design System - tokens
 * Single source of truth for colour, type, space, radius, elevation and motion.
 * Elementor Global Colors / Fonts and Elementor Variables are synced to these
 * values by CAH_Design_System so the editor UI and the CSS agree.
 */

:root {
  /* ---------- Colour primitives ---------- */
  --cah-navy-950: #050D1A;
  --cah-navy-900: #0B1B33;
  --cah-navy-800: #12294A;
  --cah-navy-700: #1A3763;
  --cah-navy-600: #24487C;
  --cah-navy-500: #335C96;
  --cah-navy-100: #E4E9F1;
  --cah-navy-50:  #F1F4F9;

  --cah-teal-900: #0A5A62;
  --cah-teal-800: #0E7C86;
  --cah-teal-700: #119AA4;
  --cah-teal-600: #19B4BE;
  --cah-teal-100: #DCF2F4;
  --cah-teal-50:  #EFFAFB;

  --cah-amber-800: #A85F00;
  --cah-amber-700: #C87400;
  --cah-amber-600: #E08900;
  --cah-amber-500: #F0A31A;
  --cah-amber-100: #FBEBD2;
  --cah-amber-50:  #FDF6EA;

  --cah-neutral-0:   #FFFFFF;
  --cah-neutral-25:  #FCFBF9;
  --cah-neutral-50:  #FAF8F5;
  --cah-neutral-100: #F4F1EC;
  --cah-neutral-200: #E9E5DE;
  --cah-neutral-300: #DCDFE6;
  --cah-neutral-400: #B7BEC9;
  --cah-neutral-500: #8792A1;
  --cah-neutral-600: #5A6675;
  --cah-neutral-700: #3D4756;
  --cah-neutral-800: #26303D;
  --cah-neutral-900: #16202E;

  /* ---------- Semantic colour ---------- */
  --cah-primary:          var(--cah-navy-900);
  --cah-primary-strong:   var(--cah-navy-950);
  --cah-primary-soft:     var(--cah-navy-800);
  --cah-primary-tint:     var(--cah-navy-50);
  --cah-on-primary:       #FFFFFF;

  --cah-secondary:        var(--cah-teal-800);
  --cah-secondary-strong: var(--cah-teal-900);
  --cah-secondary-soft:   var(--cah-teal-700);
  --cah-secondary-tint:   var(--cah-teal-50);
  --cah-on-secondary:     #FFFFFF;

  --cah-accent:           var(--cah-amber-600);
  --cah-accent-strong:    var(--cah-amber-800);
  --cah-accent-tint:      var(--cah-amber-50);
  --cah-on-accent:        #211502;

  --cah-bg:            var(--cah-neutral-50);
  --cah-bg-alt:        var(--cah-neutral-100);
  --cah-surface:       var(--cah-neutral-0);
  --cah-surface-alt:   var(--cah-neutral-25);
  --cah-surface-sunk:  var(--cah-neutral-100);
  --cah-surface-invert: var(--cah-navy-900);

  --cah-text:          var(--cah-neutral-900);
  --cah-text-soft:     var(--cah-neutral-700);
  --cah-text-muted:    var(--cah-neutral-600);
  --cah-text-invert:   #FFFFFF;
  --cah-text-invert-muted: #B9C6DA;

  --cah-border:        var(--cah-neutral-300);
  --cah-border-soft:   var(--cah-neutral-200);
  --cah-border-strong: var(--cah-neutral-400);
  --cah-border-invert: rgba(255,255,255,.16);

  --cah-link:          var(--cah-teal-900);
  --cah-link-hover:    var(--cah-navy-800);

  /* ---------- Status ---------- */
  --cah-success:      #0F7A4D;
  --cah-success-tint: #E6F4ED;
  --cah-warning:      #A15C07;
  --cah-warning-tint: #FBF0E0;
  --cah-error:        #B3261E;
  --cah-error-tint:   #FBEAE9;
  --cah-info:         #1F5FA8;
  --cah-info-tint:    #E8F0FA;

  --cah-focus-ring:   var(--cah-teal-700);

  /* ---------- Typography ---------- */
  --cah-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cah-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --cah-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --cah-fs-display:  clamp(2.625rem, 1.55rem + 4.3vw, 4.25rem);
  --cah-fs-h1:       clamp(2.125rem, 1.45rem + 2.7vw, 3.25rem);
  --cah-fs-h2:       clamp(1.75rem, 1.32rem + 1.7vw, 2.375rem);
  --cah-fs-h3:       clamp(1.375rem, 1.16rem + 0.85vw, 1.75rem);
  --cah-fs-h4:       clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --cah-fs-body-lg:  clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --cah-fs-body:     1.0625rem;
  --cah-fs-small:    0.9375rem;
  --cah-fs-caption:  0.8125rem;
  --cah-fs-button:   1rem;
  --cah-fs-nav:      0.9688rem;
  --cah-fs-eyebrow:  0.8125rem;

  --cah-lh-tight:   1.08;
  --cah-lh-snug:    1.2;
  --cah-lh-heading: 1.24;
  --cah-lh-normal:  1.55;
  --cah-lh-relaxed: 1.7;

  --cah-ls-display: -0.022em;
  --cah-ls-heading: -0.014em;
  --cah-ls-body:    -0.003em;
  --cah-ls-eyebrow: 0.09em;

  --cah-fw-regular: 400;
  --cah-fw-medium:  500;
  --cah-fw-semibold: 600;
  --cah-fw-bold:    700;

  /* ---------- Layout ---------- */
  --cah-container-max: 1200px;
  --cah-container-wide: 1360px;
  --cah-container-narrow: 960px;
  --cah-reading-max: 720px;

  --cah-gutter: 32px;
  --cah-gutter-tablet: 24px;
  --cah-gutter-mobile: 20px;
  --cah-gutter-current: var(--cah-gutter);

  --cah-header-h: 76px;
  --cah-header-h-mobile: 62px;

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

  --cah-section-y: clamp(56px, 6.5vw, 104px);
  --cah-section-y-lg: clamp(72px, 8vw, 136px);
  --cah-stack: clamp(20px, 2.2vw, 28px);
  --cah-gap: clamp(16px, 1.8vw, 24px);
  --cah-gap-lg: clamp(24px, 2.6vw, 40px);

  /* ---------- Radius ---------- */
  --cah-radius-xs: 6px;
  --cah-radius-sm: 8px;
  --cah-radius-md: 12px;
  --cah-radius-lg: 16px;
  --cah-radius-xl: 24px;
  --cah-radius-2xl: 32px;
  --cah-radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --cah-shadow-xs: 0 1px 2px rgba(11,27,51,.06);
  --cah-shadow-sm: 0 1px 3px rgba(11,27,51,.07), 0 1px 2px rgba(11,27,51,.05);
  --cah-shadow-md: 0 4px 12px rgba(11,27,51,.07), 0 2px 4px rgba(11,27,51,.04);
  --cah-shadow-lg: 0 12px 28px rgba(11,27,51,.10), 0 4px 10px rgba(11,27,51,.05);
  --cah-shadow-xl: 0 24px 56px rgba(11,27,51,.14), 0 8px 18px rgba(11,27,51,.06);
  --cah-shadow-ring: 0 0 0 1px var(--cah-border-soft);

  /* ---------- Controls ---------- */
  --cah-control-h: 48px;
  --cah-control-h-sm: 40px;
  --cah-control-h-lg: 56px;
  --cah-control-radius: var(--cah-radius-md);
  --cah-tap-min: 44px;

  /* ---------- Motion ---------- */
  --cah-ease-out: cubic-bezier(.22,.61,.36,1);
  --cah-ease-in-out: cubic-bezier(.65,.05,.36,1);
  --cah-ease-spring: cubic-bezier(.34,1.32,.64,1);
  --cah-dur-fast: 140ms;
  --cah-dur: 240ms;
  --cah-dur-slow: 420ms;
  --cah-dur-xslow: 780ms;
  --cah-stagger: 70ms;

  /* ---------- Z-index ---------- */
  --cah-z-base: 1;
  --cah-z-sticky: 100;
  --cah-z-header: 200;
  --cah-z-dropdown: 300;
  --cah-z-overlay: 400;
  --cah-z-modal: 500;
  --cah-z-toast: 600;
  --cah-z-skip: 700;
}

@media (max-width: 1024px) { :root { --cah-gutter-current: var(--cah-gutter-tablet); } }
@media (max-width: 767px)  { :root { --cah-gutter-current: var(--cah-gutter-mobile); } }


/* ==================================================================
 * BRAND PALETTE v2 - derived from the California Accident Help logo
 * ------------------------------------------------------------------
 * Exact logo values: red #E5020E, navy #031F3A, white.
 *
 * Governing principle: navy carries the design, red punctuates it.
 * Red is reserved for conversion moments (primary CTA, urgency, live
 * indicators) and small accents. Large red fills are deliberately
 * avoided - they read as discount-legal advertising rather than as a
 * considered product, and they raise anxiety on pages read by people
 * who have just been hurt.
 *
 * Verified contrast (WCAG 2.2):
 *   red   #E5020E on white   4.83:1  - passes AA for body text
 *   white on red  #E5020E    4.83:1  - passes AA, safe for buttons
 *   white on navy #031F3A   16.5:1  - passes AAA
 *   red on navy              3.42:1  - large text and non-text ONLY
 * ================================================================== */

:root {
  /* ---------- Navy scale (from the logo) ---------- */
  --cah-navy-950: #010D19;
  --cah-navy-900: #031F3A;
  --cah-navy-800: #072E52;
  --cah-navy-700: #0B3E6E;
  --cah-navy-600: #12508B;
  --cah-navy-500: #1E66AB;
  --cah-navy-400: #4C8AC7;
  --cah-navy-100: #E1E9F1;
  --cah-navy-50:  #F1F5FA;

  /* ---------- Red scale (from the logo) ---------- */
  --cah-red-900: #7E020A;
  --cah-red-800: #A5020C;
  --cah-red-700: #C6020D;
  --cah-red-600: #E5020E;
  --cah-red-500: #F62A36;
  --cah-red-400: #FF6069;
  --cah-red-100: #FCDFE1;
  --cah-red-50:  #FEF1F2;

  /* Legacy scale names remapped so every existing component inherits
     the new palette without a single selector change. */
  --cah-teal-900: var(--cah-navy-800);
  --cah-teal-800: var(--cah-navy-700);
  --cah-teal-700: var(--cah-navy-600);
  --cah-teal-600: var(--cah-navy-500);
  --cah-teal-100: var(--cah-navy-100);
  --cah-teal-50:  var(--cah-navy-50);

  --cah-amber-800: var(--cah-red-800);
  --cah-amber-700: var(--cah-red-700);
  --cah-amber-600: var(--cah-red-600);
  --cah-amber-500: var(--cah-red-500);
  --cah-amber-100: var(--cah-red-100);
  --cah-amber-50:  var(--cah-red-50);

  /* ---------- Neutrals: cool, to sit with navy ---------- */
  --cah-neutral-0:   #FFFFFF;
  --cah-neutral-25:  #FCFDFE;
  --cah-neutral-50:  #F7F9FC;
  --cah-neutral-100: #EFF3F8;
  --cah-neutral-200: #E3EAF2;
  --cah-neutral-300: #CFD9E6;
  --cah-neutral-400: #A6B4C8;
  --cah-neutral-500: #78889F;
  --cah-neutral-600: #526279;
  --cah-neutral-700: #37455C;
  --cah-neutral-800: #1F2C42;
  --cah-neutral-900: #101B2C;

  /* ---------- Semantic ---------- */
  --cah-primary:          var(--cah-navy-900);
  --cah-primary-strong:   var(--cah-navy-950);
  --cah-primary-soft:     var(--cah-navy-800);
  --cah-primary-tint:     var(--cah-navy-50);
  --cah-on-primary:       #FFFFFF;

  --cah-secondary:        var(--cah-navy-700);
  --cah-secondary-strong: var(--cah-navy-800);
  --cah-secondary-soft:   var(--cah-navy-600);
  --cah-secondary-tint:   var(--cah-navy-50);
  --cah-on-secondary:     #FFFFFF;

  --cah-accent:           var(--cah-red-600);
  --cah-accent-strong:    var(--cah-red-800);
  --cah-accent-tint:      var(--cah-red-50);
  --cah-on-accent:        #FFFFFF;

  --cah-bg:             var(--cah-neutral-50);
  --cah-bg-alt:         var(--cah-neutral-100);
  --cah-surface:        var(--cah-neutral-0);
  --cah-surface-alt:    var(--cah-neutral-25);
  --cah-surface-sunk:   var(--cah-neutral-100);
  --cah-surface-invert: var(--cah-navy-900);

  --cah-text:              var(--cah-neutral-900);
  --cah-text-soft:         var(--cah-neutral-700);
  --cah-text-muted:        var(--cah-neutral-600);
  --cah-text-invert:       #FFFFFF;
  --cah-text-invert-muted: #A9BDD4;

  --cah-border:        var(--cah-neutral-300);
  --cah-border-soft:   var(--cah-neutral-200);
  --cah-border-strong: var(--cah-neutral-400);
  --cah-border-invert: rgba(255,255,255,.14);

  /* Links use navy, not red: red links inside body copy read as errors. */
  --cah-link:       var(--cah-navy-700);
  --cah-link-hover: var(--cah-red-700);

  --cah-focus-ring: var(--cah-navy-500);

  /* ---------- Status (kept distinct from brand red) ---------- */
  --cah-success:      #067A4E;
  --cah-success-tint: #E3F5EC;
  --cah-warning:      #8A5A00;
  --cah-warning-tint: #FBF0DC;
  --cah-error:        #C6020D;
  --cah-error-tint:   #FCE8E9;
  --cah-info:         var(--cah-navy-600);
  --cah-info-tint:    var(--cah-navy-50);

  /* ---------- Premium surface effects ---------- */
  --cah-grad-hero:
      radial-gradient(120% 90% at 12% 0%,  rgba(30,102,171,.35) 0%, transparent 60%),
      radial-gradient(90% 70% at 100% 0%,  rgba(229,2,14,.20) 0%, transparent 55%),
      linear-gradient(168deg, #052949 0%, #031F3A 45%, #010F1E 100%);
  --cah-grad-navy:  linear-gradient(160deg, #072E52 0%, #031F3A 100%);
  --cah-grad-red:   linear-gradient(135deg, #F62A36 0%, #E5020E 55%, #C6020D 100%);
  --cah-grad-sheen: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  --cah-grad-rule:  linear-gradient(90deg, var(--cah-red-600), var(--cah-navy-600));

  --cah-glow-red:  0 10px 30px -8px rgba(229,2,14,.45);
  --cah-glow-navy: 0 10px 34px -10px rgba(3,31,58,.45);

  --cah-glass:        rgba(255,255,255,.72);
  --cah-glass-dark:   rgba(255,255,255,.06);
  --cah-glass-border: rgba(255,255,255,.14);

  /* Shadows retuned to the cool palette */
  --cah-shadow-xs: 0 1px 2px rgba(3,31,58,.06);
  --cah-shadow-sm: 0 1px 3px rgba(3,31,58,.08), 0 1px 2px rgba(3,31,58,.05);
  --cah-shadow-md: 0 6px 16px -4px rgba(3,31,58,.10), 0 2px 6px -2px rgba(3,31,58,.06);
  --cah-shadow-lg: 0 16px 36px -10px rgba(3,31,58,.16), 0 6px 14px -6px rgba(3,31,58,.08);
  --cah-shadow-xl: 0 30px 64px -16px rgba(3,31,58,.22), 0 10px 24px -10px rgba(3,31,58,.10);
}
