:root {
  /* === Colors — Brand: Primary (Violet) === */
  --color-primary-50: #f7f0ff;
  --color-primary-100: #e9d6ff;
  --color-primary-200: #d2aeff;
  --color-primary-300: #bc85fe;
  --color-primary-400: #ab67fe;
  --color-primary-500: #9843fe;
  --color-primary-600: #7f24f0;
  --color-primary-700: #5c00cb;
  --color-primary-800: #4801a0;
  --color-primary-900: #37017a;

  /* === Colors — Brand: Secondary (Red) === */
  --color-secondary-50: #ffecef;
  --color-secondary-100: #ffcfd5;
  --color-secondary-200: #ff9d9d;
  --color-secondary-300: #f97777;
  --color-secondary-400: #ff5754;
  --color-secondary-500: #ff4638;
  --color-secondary-600: #fb3e39;
  --color-secondary-700: #e83332;
  --color-secondary-800: #db2c2b;
  --color-secondary-900: #cb201f;

  /* === Colors — Brand: Tertiary (Orange) === */
  --color-tertiary-50: #fdeae6;
  --color-tertiary-100: #ffcfba;
  --color-tertiary-200: #ffb18e;
  --color-tertiary-300: #ff9360;
  --color-tertiary-400: #ff7c3a;
  --color-tertiary-500: #ff680f;
  --color-tertiary-600: #f46209;
  --color-tertiary-700: #e65a03;
  --color-tertiary-800: #d95300;
  --color-tertiary-900: #c04600;

  /* === Colors — UI: Base === */
  --color-base-white: #ffffff;
  --color-base-black: #171717;
  --color-base-transparent: #ffffff00;
  --color-base-100: #f5f5f5;
  --color-base-200: #e5e5e5;
  --color-base-300: #d4d4d4;
  --color-base-400: #c2c2c2;
  --color-base-500: #a3a3a3;
  --color-base-600: #737373;
  --color-base-700: #525252;
  --color-base-800: #404040;
  --color-base-900: #262626;

  /* === Colors — UI: Neutral (warm) === */
  --color-neutral-50: #fff9f2;
  --color-neutral-100: #fcf4ed;
  --color-neutral-200: #f5ede6;
  --color-neutral-300: #e7dfd8;
  --color-neutral-400: #c4bcb6;
  --color-neutral-500: #a59d97;
  --color-neutral-600: #7c746e;
  --color-neutral-700: #67605b;
  --color-neutral-800: #48413c;
  --color-neutral-900: #26201c;

  /* === Colors — UI: Gray === */
  --color-gray-50: #fafaf9;
  --color-gray-100: #f5f5f4;
  --color-gray-200: #e7e5e4;
  --color-gray-300: #d6d3d1;
  --color-gray-400: #a8a29e;
  --color-gray-500: #78716c;
  --color-gray-600: #57534e;
  --color-gray-700: #44403c;
  --color-gray-800: #292524;
  --color-gray-900: #1c1917;

  /* === Colors — UI: Violet === */
  --color-violet-50: #e9e9ff;
  --color-violet-100: #c1bdff;
  --color-violet-200: #a89ffd;
  --color-violet-300: #7f63f4;
  --color-violet-400: #6e3fef;
  --color-violet-500: #682fed;
  --color-violet-600: #5927ce;
  --color-violet-700: #4b20b0;
  --color-violet-800: #301277;
  --color-violet-900: #180642;

  /* === Colors — UI: Blue === */
  --color-blue-50: #ecf6fe;
  --color-blue-100: #cfe8fc;
  --color-blue-200: #9ed0fa;
  --color-blue-300: #64b5f7;
  --color-blue-400: #42a5f5;
  --color-blue-500: #2496f3;
  --color-blue-600: #2188e5;
  --color-blue-700: #1a72cb;
  --color-blue-800: #12519c;
  --color-blue-900: #0b3375;

  /* === Colors — UI: Teal === */
  --color-teal-50: #e4f8fc;
  --color-teal-100: #c2eff5;
  --color-teal-200: #80ddea;
  --color-teal-300: #4cd0e1;
  --color-teal-400: #29c5da;
  --color-teal-500: #03bbd4;
  --color-teal-600: #00acc1;
  --color-teal-700: #0096a7;
  --color-teal-800: #006f7a;
  --color-teal-900: #00585c;

  /* === Colors — UI: Green === */
  --color-green-50: #e9f5e9;
  --color-green-100: #d1ead2;
  --color-green-200: #9cdeb2;
  --color-green-300: #6ace8c;
  --color-green-400: #66bb6b;
  --color-green-500: #4caf50;
  --color-green-600: #44a047;
  --color-green-700: #388e3c;
  --color-green-800: #215a24;
  --color-green-900: #154718;

  /* === Colors — UI: Yellow === */
  --color-yellow-50: #fff9ec;
  --color-yellow-100: #fff4d6;
  --color-yellow-200: #ffe8ad;
  --color-yellow-300: #ffd871;
  --color-yellow-400: #ffc634;
  --color-yellow-600: #e0a100;
  --color-yellow-700: #b88401;
  --color-yellow-800: #7a5900;
  --color-yellow-900: #5c4000;

  /* === Colors — UI: Orange === */
  --color-orange-50: #fff4eb;
  --color-orange-100: #ffeacc;
  --color-orange-200: #ffceae;
  --color-orange-300: #ffa970;
  --color-orange-500: #ff7820;
  --color-orange-600: #f56300;
  --color-orange-700: #cd5201;
  --color-orange-800: #943c00;
  --color-orange-900: #7a3200;

  /* === Colors — UI: Red === */
  --color-red-50: #fceff0;
  --color-red-100: #fadde1;
  --color-red-200: #f091a5;
  --color-red-300: #e86782;
  --color-red-400: #e14b69;
  --color-red-500: #db3753;
  --color-red-600: #d02642;
  --color-red-700: #b62d4c;
  --color-red-800: #ac2038;
  --color-red-900: #8a192c;

  /* === Colors — UI: Pink === */
  --color-pink-50: #fff0f5;
  --color-pink-100: #fedce9;
  --color-pink-200: #febed6;
  --color-pink-300: #ff93bb;
  --color-pink-400: #fd639a;
  --color-pink-500: #fc367c;
  --color-pink-600: #e91b69;
  --color-pink-700: #c81d63;
  --color-pink-800: #ae195c;
  --color-pink-900: #8a1454;

  /* === Colors — UI: Alpha Black === */
  --color-alpha-black-100: #0000001a;
  --color-alpha-black-200: #00000033;
  --color-alpha-black-300: #0000004d;
  --color-alpha-black-400: #00000066;
  --color-alpha-black-500: #00000080;
  --color-alpha-black-600: #00000099;
  --color-alpha-black-700: #000000b2;
  --color-alpha-black-800: #000000cc;
  --color-alpha-black-900: #000000e5;

  /* === Colors — UI: Alpha White === */
  --color-alpha-white-100: #ffffff1a;
  --color-alpha-white-200: #ffffff33;
  --color-alpha-white-300: #ffffff4d;
  --color-alpha-white-400: #ffffff66;
  --color-alpha-white-500: #ffffff80;
  --color-alpha-white-600: #ffffff99;
  --color-alpha-white-700: #ffffffb2;
  --color-alpha-white-800: #ffffffcc;
  --color-alpha-white-900: #ffffffe5;

  /* === Colors — Legacy aliases (map old names → new tokens) === */
  --color-dusk-violet: var(--color-primary-800);
  --color-sunkissed-pink: var(--color-secondary-300);
  --color-sunrise: var(--color-yellow-200);
  --color-evening-blue: var(--color-blue-300);
  /* Tangerine + sunbeam re-mapped from the orange (tertiary) palette
     to the coral (secondary) palette as part of the brand pivot
     (orange → coral, 2026-04). Names retained for legacy compatibility. */
  --color-tangerine: var(--color-secondary-300);
  --color-sunbeam: var(--color-secondary-50);
  --color-rose-mist: var(--color-pink-300);
  --color-picta-red: var(--color-red-600);
  --color-lilac-glow: var(--color-violet-100);
  --color-skylight-blue: var(--color-blue-100);
  --color-aurora-green: var(--color-green-200);

  /* === Colors — Derived === */
  --color-white: var(--color-base-white);
  --color-black: var(--color-base-black);
  --color-off-white: var(--color-gray-50);
  --color-white-85: var(--color-alpha-white-800);
  --color-dusk-violet-dark: var(--color-primary-900);
  /* Home hero — soft bottom wash */
  --color-hero-glow-1: color-mix(in srgb, var(--color-evening-blue) 18%, transparent);
  --color-hero-glow-2: color-mix(in srgb, var(--color-lilac-glow) 14%, transparent);
  /* === Colors — Semantic === */
  --color-primary: var(--color-primary-800);
  --color-primary-dark: var(--color-primary-900);
  --color-text: var(--color-base-900);
  --color-text-light: var(--color-base-600);
  --color-text-on-dark: var(--color-base-white);
  --color-bg: #f6f7f9;
  --color-bg-alt: var(--color-base-100);
  --color-bg-accent: var(--color-secondary-50);

  /* === Typography — Major Third (1.250) scale === */
  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Font sizes — 1.250 ratio, fluid with clamp() */
  --text-xs: clamp(0.64rem, 0.58rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.74rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.93rem + 0.35vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.03rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.563rem);
  --text-2xl: clamp(1.563rem, 1.3rem + 1.3vw, 1.953rem);
  --text-3xl: clamp(1.953rem, 1.5rem + 2.25vw, 2.441rem);
  --text-4xl: clamp(2.441rem, 1.8rem + 3.2vw, 3.052rem);
  --text-5xl: clamp(3.052rem, 2.2rem + 4.25vw, 3.815rem);

  /* Display — hero and page headlines. Wider range than the 1.25 scale so the
     headline reads comfortably on narrow viewports (40px) and still feels large
     at desktop (61px). Do not use for stats or regular h1/h2. */
  --text-display: clamp(2.5rem, 1.74rem + 3.24vw, 3.815rem);

  /* Line heights — paired to size tiers */
  --leading-none: 1;
  --leading-display: 1.063;   /* .display-large only (hero headline) */
  --leading-tight: 1.1;       /* display medium, headline large/medium (h2, big cards) */
  --leading-snug: 1.3;        /* headline small, titles, labels */
  --leading-normal: 1.5;      /* body small */
  --leading-relaxed: 1.65;    /* body large/medium, long-form */
  --leading-loose: 1.8;       /* spacious reading */

  /* Letter spacing */
  --tracking-tighter: -0.02em;  /* large display text */
  --tracking-tight: -0.01em;    /* headings */
  --tracking-normal: 0;         /* body */
  --tracking-wide: 0.04em;      /* small labels */
  --tracking-wider: 0.08em;     /* uppercase tags */

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* === Spacing === */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-26: 7rem;
  --sp-28: 8rem;
  --sp-32: 10rem;

  /* === Layout === */
  --max-width: 1280px;
  --max-width-narrow: 900px;
  --max-width-wide: 1440px;
  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --content-measure: 65ch;

  /* === Breakpoints — mobile-first, min-width only ===
     CSS variables cannot be used inside @media queries; these tokens are the
     documented source of truth. Media queries must reference them in a
     leading comment, e.g.  >= --bp-tablet  then @media (min-width: 720px). */
  --bp-tablet: 720px;
  --bp-desktop: 1024px;

  /* === Fluid layout spacing — scales smoothly with viewport ===
     Use for section padding, grid gaps, layout margins.
     Component-internal spacing (button padding, card inner padding) keeps --sp-*. */
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);   /*  8–12px */
  --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem); /* 12–20px */
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.75rem);       /* 16–28px */
  --space-lg: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);     /* 24–44px */
  --space-xl: clamp(2rem, 1.4rem + 3vw, 4rem);          /* 32–64px */
  --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);           /* 48–96px */

  /* === Borders === */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;   /* 28px — large section/card containers (bento, slab tops, pull-quote, derisk) */
  --radius-pill: 100px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  /* Soft upward glow at the top edge of "slab" wrappers (light or dark)
     that float over the page background — used by .r-slab and
     .partners__wrapper. */
  --shadow-slab-top: 0 -4px 32px rgba(44, 47, 48, 0.06);
  /* Large editorial cards (pull-quote, de-risk, final-cta photos). */
  --shadow-card:       0 24px 48px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 32px 60px rgba(0, 0, 0, 0.08);

  /* === Motion — Easing === */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);       /* entering: reveals, fade-ins — power3.out equivalent (settling feel) */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);            /* exiting: fade-outs, dismissals */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);      /* continuous: rotation, parallax, layout shifts */
  --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);  /* snappy: header show/hide, hover lifts */

  /* === Motion — Durations === */
  --duration-instant: 100ms;   /* hover color, focus states */
  --duration-fast: 200ms;      /* hover lifts, dropdowns, stagger gaps */
  --duration-base: 300ms;      /* standard reveals, fade-ins, exits */
  --duration-content: 400ms;   /* content reveals — staggered items, scroll-triggered entrances (Claude workhorse pace) */
  --duration-slow: 500ms;      /* emphasis — timeline, fade-only */
  --duration-ring: 650ms;      /* heavy choreography — cycle rotation, hero */

  /* === Motion — Offsets === */
  --offset-sm: 4px;    /* hover lifts, micro-shifts, exit nudges */
  --offset-md: 13px;   /* standard entrance reveals */
  --offset-lg: 20px;   /* staggered reveals, section entrances */
  --offset-xl: 30px;   /* hero-scale, dramatic entrances */
  --offset-2xl: 80px;  /* big photo drop-ins (final-cta polaroids) */

  /* === Motion — Stagger === */
  --stagger-gap: 80ms; /* base delay between staggered siblings */

  /* === Motion — Delays ===
     Sequenced reveals where one tween waits on another.
     short  = sibling-to-sibling within the same trigger
     base   = headline → lead → CTA type sequencing
     long   = deliberate hold before a secondary element enters */
  --delay-short: 80ms;
  --delay-base:  150ms;
  --delay-long:  300ms;
}