/* ========== Exa Design Tokens ========== */
/*
 * Source of truth: the ExaLife frontend (life-exabyting-frontend), ported without Tailwind.
 * Load before every other stylesheet. Reference tokens, never raw values.
 *
 * 1. Palette: raw color scales. Step 1 is lightest, 11 darkest; step 5 is the base hue.
 * 2. Semantic colors: what components should reference. Point these at palette steps,
 *    so a color change happens here once instead of across every stylesheet.
 * 3. Typography: families, weights and per-style size / line height / tracking.
 * 4. Spacing   5. Layout   6. Shadows   7. Motion   8. Z-index   9. State
 *
 * Breakpoints (CSS variables can't be used inside @media, so use these literals):
 *   sm 640px · md 768px · lg 1024px
 */

:root {
  /* ---------- 1. Palette ---------- */

  /* Red */
  --exa-red-1: oklch(97.1% 0.013 17);
  --exa-red-2: oklch(93.6% 0.032 18);
  --exa-red-3: oklch(88% 0.065 19);
  --exa-red-4: oklch(79% 0.115 21);
  --exa-red-5: oklch(63.7% 0.237 25.3);
  --exa-red-6: oklch(57.5% 0.245 27);
  --exa-red-7: oklch(50% 0.215 27);
  --exa-red-8: oklch(43% 0.177 27);
  --exa-red-9: oklch(37% 0.142 26);
  --exa-red-10: oklch(29% 0.105 26);
  --exa-red-11: oklch(21% 0.07 26);

  /* Orange */
  --exa-orange-1: oklch(98% 0.016 74);
  --exa-orange-2: oklch(95% 0.038 75);
  --exa-orange-3: oklch(90% 0.078 71);
  --exa-orange-4: oklch(83% 0.13 66);
  --exa-orange-5: oklch(70.5% 0.213 47.6);
  --exa-orange-6: oklch(64.5% 0.222 41);
  --exa-orange-7: oklch(55% 0.195 38);
  --exa-orange-8: oklch(47% 0.158 37);
  --exa-orange-9: oklch(40% 0.123 38);
  --exa-orange-10: oklch(30% 0.087 38);
  --exa-orange-11: oklch(22% 0.058 36);

  /* Yellow */
  --exa-ylw-1: oklch(98.7% 0.026 102);
  --exa-ylw-2: oklch(97.3% 0.071 103);
  --exa-ylw-3: oklch(94.5% 0.13 102);
  --exa-ylw-4: oklch(90% 0.175 98);
  --exa-ylw-5: oklch(82% 0.188 88);
  --exa-ylw-6: oklch(72% 0.175 78);
  --exa-ylw-7: oklch(58% 0.148 68);
  --exa-ylw-8: oklch(49% 0.124 63);
  --exa-ylw-9: oklch(42% 0.103 59);
  --exa-ylw-10: oklch(32% 0.075 56);
  --exa-ylw-11: oklch(24% 0.052 53);

  /* Green */
  --exa-green-1: oklch(98.2% 0.018 156);
  --exa-green-2: oklch(96.2% 0.044 157);
  --exa-green-3: oklch(92.5% 0.084 156);
  --exa-green-4: oklch(87% 0.15 154);
  --exa-green-5: oklch(72.3% 0.219 149.6);
  --exa-green-6: oklch(62.5% 0.194 149);
  --exa-green-7: oklch(52.5% 0.154 150);
  --exa-green-8: oklch(44.5% 0.119 151);
  --exa-green-9: oklch(38% 0.095 152);
  --exa-green-10: oklch(28% 0.068 153);
  --exa-green-11: oklch(20% 0.046 153);

  /* Mint */
  --exa-mint-1: oklch(98.4% 0.014 181);
  --exa-mint-2: oklch(95.3% 0.051 181);
  --exa-mint-3: oklch(91% 0.096 181);
  --exa-mint-4: oklch(85.5% 0.138 181);
  --exa-mint-5: oklch(70.4% 0.14 182.5);
  --exa-mint-6: oklch(60% 0.118 185);
  --exa-mint-7: oklch(51% 0.096 186);
  --exa-mint-8: oklch(43.5% 0.078 188);
  --exa-mint-9: oklch(38.5% 0.063 188);
  --exa-mint-10: oklch(29% 0.047 192);
  --exa-mint-11: oklch(21% 0.032 194);

  /* Cyan */
  --exa-cyan-1: oklch(98.4% 0.019 201);
  --exa-cyan-2: oklch(95.6% 0.045 203);
  --exa-cyan-3: oklch(91.5% 0.08 205);
  --exa-cyan-4: oklch(86% 0.127 207);
  --exa-cyan-5: oklch(71.5% 0.143 215.2);
  --exa-cyan-6: oklch(60.5% 0.126 222);
  --exa-cyan-7: oklch(52% 0.105 223);
  --exa-cyan-8: oklch(45% 0.086 224);
  --exa-cyan-9: oklch(39.5% 0.07 227);
  --exa-cyan-10: oklch(30% 0.056 230);
  --exa-cyan-11: oklch(22% 0.038 231);

  /* Exa Blue (brand) */
  --exa-1: oklch(97% 0.013 262);
  --exa-2: oklch(92% 0.036 261);
  --exa-3: oklch(84% 0.082 260);
  --exa-4: oklch(72% 0.155 258);
  --exa-5: #0072ED;
  --exa-6: oklch(50% 0.21 259);
  --exa-7: oklch(43% 0.195 260);
  --exa-8: oklch(36% 0.165 261);
  --exa-9: oklch(29% 0.125 262);
  --exa-10: oklch(22% 0.09 263);
  --exa-11: oklch(15% 0.058 265);

  /* Indigo */
  --exa-indigo-1: oklch(96.2% 0.018 272);
  --exa-indigo-2: oklch(93% 0.034 273);
  --exa-indigo-3: oklch(87% 0.065 274);
  --exa-indigo-4: oklch(78.5% 0.115 274);
  --exa-indigo-5: oklch(58.5% 0.233 277.1);
  --exa-indigo-6: oklch(51% 0.262 277);
  --exa-indigo-7: oklch(45.5% 0.24 277);
  --exa-indigo-8: oklch(39.5% 0.196 277);
  --exa-indigo-9: oklch(35.5% 0.144 279);
  --exa-indigo-10: oklch(27% 0.099 281);
  --exa-indigo-11: oklch(19% 0.063 281);

  /* Purple */
  --exa-purple-1: oklch(97.7% 0.014 308);
  --exa-purple-2: oklch(94.6% 0.033 307);
  --exa-purple-3: oklch(90.2% 0.063 307);
  --exa-purple-4: oklch(82.5% 0.119 306);
  --exa-purple-5: oklch(62.7% 0.265 303.9);
  --exa-purple-6: oklch(55.5% 0.288 302);
  --exa-purple-7: oklch(49.5% 0.265 302);
  --exa-purple-8: oklch(43.5% 0.218 304);
  --exa-purple-9: oklch(38% 0.175 305);
  --exa-purple-10: oklch(29% 0.149 303);
  --exa-purple-11: oklch(21% 0.108 302);

  /* bKash */
  --exa-bkash-1: oklch(97% 0.014 343);
  --exa-bkash-2: oklch(92% 0.03 343);
  --exa-bkash-3: oklch(84% 0.068 346);
  --exa-bkash-4: oklch(72% 0.138 351);
  --exa-bkash-5: #E2136E;
  --exa-bkash-6: oklch(52% 0.228 4);
  --exa-bkash-7: oklch(45% 0.21 5);
  --exa-bkash-8: oklch(38% 0.178 5);
  --exa-bkash-9: oklch(30% 0.138 5);
  --exa-bkash-10: oklch(23% 0.098 5);
  --exa-bkash-11: oklch(16% 0.065 5);

  /* Neutral (cool, blue-tinted) */
  --exa-neutral-1: oklch(97.5% 0.002 248);
  --exa-neutral-2: oklch(94% 0.006 248);
  --exa-neutral-3: oklch(89% 0.012 255);
  --exa-neutral-4: oklch(82% 0.02 252);
  --exa-neutral-5: oklch(67% 0.038 256);
  --exa-neutral-6: oklch(55% 0.046 257);
  --exa-neutral-7: oklch(44.5% 0.043 257);
  --exa-neutral-8: oklch(37% 0.044 257);
  --exa-neutral-9: oklch(27.5% 0.041 260);
  --exa-neutral-10: oklch(20% 0.042 265);
  --exa-neutral-11: oklch(12% 0.042 265);

  /* Grey (pure) */
  --exa-grey-1: oklch(100% 0 0);
  --exa-grey-2: oklch(99% 0 0);
  --exa-grey-3: oklch(97.5% 0 0);
  --exa-grey-4: oklch(96% 0 0);
  --exa-grey-5: oklch(92% 0 0);
  --exa-grey-6: oklch(87% 0 0);
  --exa-grey-7: oklch(79% 0 0);
  --exa-grey-8: oklch(68% 0 0);
  --exa-grey-9: oklch(55% 0 0);
  --exa-grey-10: oklch(41% 0 0);
  --exa-grey-11: oklch(25% 0 0);

  /* Black & White */
  --exa-black: #000000;
  --exa-white: #ffffff;

  /* ---------- 2. Semantic colors ---------- */
  /* Mirrors the semantic aliases in the Exa design system (ExaLife src/index.css). */

  /* Brand */
  --exa-color-primary: var(--exa-5);
  --exa-color-primary-foreground: var(--exa-white);
  --exa-color-brand: var(--exa-6);
  --exa-color-brand-foreground: var(--exa-white);
  --exa-color-brand-subtle: var(--exa-2);

  /* Text */
  --exa-color-text-primary: var(--exa-11);
  --exa-color-text-secondary: var(--exa-neutral-7);
  --exa-color-text-tertiary: var(--exa-neutral-5);
  --exa-color-text-inverse: var(--exa-white);
  --exa-color-text-brand: var(--exa-color-brand);

  /* Surfaces */
  --exa-color-bg: var(--exa-grey-2);
  --exa-color-surface: var(--exa-white);
  --exa-color-surface-soft: var(--exa-1);
  --exa-color-muted: var(--exa-neutral-2);
  --exa-color-pill: var(--exa-neutral-3);
  --exa-color-pill-hover: var(--exa-neutral-4);
  --exa-color-overlay: color-mix(in oklch, var(--exa-black) 10%, transparent);
  --exa-color-overlay-strong: color-mix(in oklch, var(--exa-11) 40%, transparent);

  /* Borders & focus */
  --exa-color-border: var(--exa-neutral-3);
  --exa-color-hairline: var(--exa-neutral-2);
  --exa-color-ring: var(--exa-neutral-6);

  /* Status */
  --exa-color-success: var(--exa-green-7);
  --exa-color-success-subtle: var(--exa-green-1);
  --exa-color-warning: var(--exa-ylw-7);
  --exa-color-warning-subtle: var(--exa-ylw-1);
  --exa-color-danger: var(--exa-red-6);
  --exa-color-danger-subtle: var(--exa-red-1);
  --exa-color-info: var(--exa-cyan-7);
  --exa-color-info-subtle: var(--exa-cyan-1);

  /* Gradients */
  --exa-gradient-brand: linear-gradient(90deg, var(--exa-4) 0%, var(--exa-cyan-5) 70%, var(--exa-5) 100%);
  --exa-gradient-brand-cyan: linear-gradient(90deg, var(--exa-color-brand) 0%, var(--exa-cyan-6) 100%);

  /* Radius */
  --exa-radius-sm: 8px;
  --exa-radius: 10px;
  --exa-radius-xl: 14px;
  --exa-radius-card: 15px;
  --exa-radius-2xl: 20px;
  --exa-radius-cutout: 12px; /* corners of the brand cutout shape */
  --exa-radius-full: 9999px;

  /* ---------- 3. Typography ---------- */
  /* Mobile values; "-md" values apply from 768px up (ExaLife's md breakpoint). */

  /* Families */
  --exa-font-heading: "Gilroy", "Outfit", ui-sans-serif, system-ui, sans-serif;
  --exa-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Weights */
  --exa-font-weight-regular: 400;
  --exa-font-weight-medium: 500;
  --exa-font-weight-semibold: 600;
  --exa-font-weight-bold: 700;

  /* Display: hero headline */
  --exa-text-display-size: 40px;
  --exa-text-display-line-height: 1.2;
  --exa-text-display-tracking: -1px;
  --exa-text-display-size-md: 64px;
  --exa-text-display-line-height-md: 1;
  --exa-text-display-tracking-md: -1.5px;

  /* Heading: section headings */
  --exa-text-heading-size: 28px;
  --exa-text-heading-line-height: 1.2;
  --exa-text-heading-tracking: -0.5px;
  --exa-text-heading-size-md: 40px;
  --exa-text-heading-tracking-md: -1px;

  /* Quote: testimonial pull quote */
  --exa-text-quote-size: 28px;
  --exa-text-quote-line-height: 1.2;
  --exa-text-quote-tracking: -0.5px;

  /* Title: card and item titles (Figma "Typography/H4/Bold") */
  --exa-text-title-size: 20px;
  --exa-text-title-line-height: 1.6;
  --exa-text-title-tracking: -0.5px;

  /* Title S: smaller bold titles */
  --exa-text-title-s-size: 18px;
  --exa-text-title-s-line-height: 1.55;

  /* Subtitle: medium-weight Gilroy under titles */
  --exa-text-subtitle-size: 20px;
  --exa-text-subtitle-line-height: 1.4;
  --exa-text-subtitle-tracking: -0.5px;

  /* Eyebrow: pill label above section headings */
  --exa-text-eyebrow-size: 16px;
  --exa-text-eyebrow-line-height: 1.4;

  /* Lead: intro paragraph under a display or heading */
  --exa-text-lead-size: 18px;
  --exa-text-lead-line-height: 1.6;
  --exa-text-lead-size-md: 20px;
  --exa-text-lead-line-height-md: 1.4;

  /* Body */
  --exa-text-body-size: 16px;
  --exa-text-body-line-height: 1.6;
  --exa-text-body-s-size: 14px;
  --exa-text-body-s-line-height: 1.43;

  /* Caption */
  --exa-text-caption-size: 12px;
  --exa-text-caption-line-height: 1.6;

  /* ---------- 4. Spacing ---------- */
  /* Named by pixel value. ExaLife mixes an 8px rhythm (8/16/24/32…) with a 10px one (10/20/30/60…). */
  --exa-space-0: 0;
  --exa-space-2: 2px;
  --exa-space-4: 4px;
  --exa-space-6: 6px;
  --exa-space-8: 8px;
  --exa-space-10: 10px;
  --exa-space-12: 12px;
  --exa-space-14: 14px;
  --exa-space-16: 16px;
  --exa-space-20: 20px;
  --exa-space-24: 24px;
  --exa-space-30: 30px;
  --exa-space-32: 32px;
  --exa-space-40: 40px;
  --exa-space-48: 48px;
  --exa-space-60: 60px;
  --exa-space-64: 64px;
  --exa-space-80: 80px;
  --exa-space-100: 100px;
  --exa-space-120: 120px;

  /* ---------- 5. Layout ---------- */
  --exa-container-max: 1440px; /* 1200px content + 2 x 120px gutters */
  --exa-content-max: 1200px;
  --exa-gutter: 16px;
  --exa-gutter-lg: 120px; /* from 1024px */

  /* ---------- 6. Shadows ---------- */
  --exa-shadow-xs: 0 2px 4px rgb(0 0 0 / 0.15);
  --exa-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06);
  --exa-shadow-md: 0 8px 32px rgb(0 0 0 / 0.08);
  --exa-shadow-ring: 0 0 0 1px color-mix(in oklch, var(--exa-11) 10%, transparent);

  /* ---------- 7. Motion ---------- */
  --exa-duration-fast: 100ms;
  --exa-duration-base: 150ms;
  --exa-duration-moderate: 200ms;
  --exa-duration-slow: 300ms;
  --exa-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --exa-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---------- 8. Z-index ---------- */
  --exa-z-base: 0;
  --exa-z-raised: 10;
  --exa-z-sticky: 20;
  --exa-z-overlay: 40;
  --exa-z-modal: 50;
  --exa-z-top: 3000;

  /* ---------- 9. State ---------- */
  --exa-opacity-disabled: 0.5;
  --exa-focus-ring: 0 0 0 3px color-mix(in oklch, var(--exa-color-ring) 50%, transparent);
}