/* Claims Saathi — Design Tokens */
:root {
  /* Brand colours */
  --navy-950: #04172f;
  --navy-900: #062654;
  --navy-850: #07316b;
  --navy-800: #083b7a;
  --blue-700: #075db7;
  --blue-600: #087bd3;
  --blue-500: #0a9cde;
  --cyan-400: #38bce8;

  --green-700: #246b1d;
  --green-600: #388c27;
  --green-500: #55a83a;
  --green-300: #a7d398;

  --orange-600: #df7108;
  --orange-500: #f28a17;
  --orange-300: #ffc06a;

  --white: #ffffff;
  --surface-50: #f8fafc;
  --surface-100: #f1f6fa;
  --surface-200: #e5edf4;

  --text-primary: #10243f;
  --text-secondary: #53677c;
  --text-muted: #718296;
  --border: #d8e3ec;

  --success: #2f8128;
  --warning: #b56800;
  --error: #b42318;
  --info: #0b6da8;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #062654 0%, #087bd3 55%, #0a9cde 100%);
  --gradient-dark: linear-gradient(160deg, #04172f 0%, #062654 45%, #07316b 100%);
  --gradient-trust: linear-gradient(135deg, #246b1d 0%, #55a83a 100%);
  --gradient-hero: linear-gradient(145deg, #04172f 0%, #062654 35%, #075db7 70%, #0a9cde 100%);
  --gradient-soft: linear-gradient(180deg, #f8fafc 0%, #eef5fb 50%, #e5edf4 100%);
  --gradient-glow: radial-gradient(ellipse at 30% 20%, rgba(10, 156, 222, 0.22), transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(85, 168, 58, 0.12), transparent 45%),
    radial-gradient(ellipse at 70% 80%, rgba(242, 138, 23, 0.08), transparent 40%);

  /* Typography */
  --font-body: Inter, Manrope, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: Manrope, "Segoe UI", Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --fs-4xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-5xl: clamp(2.4rem, 1.7rem + 2.8vw, 3.75rem);
  --fs-6xl: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

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

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(3.5rem, 6vw, 6.5rem);

  /* Layout */
  --container: 72rem;
  --container-wide: 80rem;
  --container-narrow: 42rem;
  --header-h: 4.5rem;
  --header-h-scrolled: 3.875rem;
  --utility-h: 2.25rem;
  --mobile-bar-h: 4.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(4, 23, 47, 0.05);
  --shadow-sm: 0 2px 8px rgba(4, 23, 47, 0.06);
  --shadow-md: 0 8px 24px rgba(4, 23, 47, 0.08);
  --shadow-lg: 0 16px 40px rgba(4, 23, 47, 0.12);
  --shadow-xl: 0 28px 64px rgba(4, 23, 47, 0.16);
  --shadow-header: 0 8px 28px rgba(6, 38, 84, 0.1);
  --shadow-focus: 0 0 0 3px rgba(8, 123, 211, 0.35);
  --shadow-btn: 0 8px 20px rgba(8, 123, 211, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration: 280ms;
  --duration-slow: 480ms;

  /* Z-index */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 100;
  --z-dropdown: 120;
  --z-overlay: 200;
  --z-drawer: 220;
  --z-modal: 300;
  --z-toast: 400;
  --z-mobile-bar: 90;

  /* Theme */
  --theme-color: #062654;
  --link: var(--blue-700);
  --link-hover: var(--navy-800);
  --max-prose: 40rem;
}