/* Design tokens shared by the homepage and every case study.
   Loaded first, before any other stylesheet.

   NOTE: --container is deliberately NOT here. It is 1280px on the homepage and
   1140px on case studies, where theme-editorial overrides it back to 1280px. */
:root {
    /* Palette */
    --gu-purple-950: #0E0124;
    --gu-purple-900: #1C0447;
    --gu-eggplant-800: #221D38;
    --gu-purple-700: #341E52;
    --gu-purple-600: #381C55;
    --gu-purple-500: #4A2A6B;
    --gu-lilac-400: #B49BF0;
    --gu-lilac-300: #C4AAF3;
    --gu-lilac-200: #D0C1FF;
    --gu-lilac-100: #E5DDFF;
    --gu-lilac-050: #F2EEFF;
    --gu-white: #FFFFFF;
    --gu-paper: #FAFAFA;
    --gu-paper-dim: #F0EEF4;
    --gu-ink-soft: #6F6A7D;
    --gu-gray-300: #C4C2C9;
    --gv-green: #15C246;
    --gv-ink: #000E35;

    /* Semantic roles */
    --brand-primary: var(--gu-purple-900);
    --brand-accent: var(--gu-lilac-200);
    --surface-deep: var(--gu-purple-900);
    --surface-eggplant: var(--gu-eggplant-800);
    --surface-lilac: var(--gu-lilac-200);
    --surface-paper: var(--gu-paper);
    --text-on-dark: var(--gu-paper);
    --text-on-dark-accent: var(--gu-lilac-200);
    --text-on-dark-muted: rgba(250,250,250,0.66);
    --text-on-light: var(--gu-purple-900);
    --text-on-light-muted: var(--gu-ink-soft);
    --stroke-on-dark: rgba(250,250,250,0.85);
    --stroke-on-light: var(--gu-purple-900);
    --focus-ring: var(--gu-lilac-200);

    /* Type */
    --font-display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-logo: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-h1: clamp(34px, 5.2vw, 56px);
    --fs-h2: clamp(28px, 3.6vw, 40px);
    --fs-h3: clamp(22px, 2.6vw, 30px);
    --fs-body-lg: 20px;
    --fs-body: 17px;
    --fs-body-sm: 15px;
    --fs-label: 13px;
    --lh-display: 1.05;
    --lh-body: 1.45;
    --ls-display: -0.01em;
    --ls-label: 0.08em;

    /* Space + shape */
    --space-4: 16px; --space-5: 24px; --space-6: 32px;
    --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
    --radius-pill: 999px;
    --radius-md: 16px;
    --border-width: 2px;

    /* Motion */
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;
}