/* ==========================================================================
   Design tokens — the only place raw values live.
   Everything else references these. Change a brand colour here and the whole
   site follows.
   ========================================================================== */

:root {
    /* ---- brand ramp -------------------------------------------------------
       Built around #fc3a72. The darker steps keep the same hue and gain
       saturation so hover states read as "more of the same colour", not as a
       different one. The tints are for surfaces, never for text. */
    --brand-50: #fff1f5;
    --brand-100: #ffdde6;
    --brand-300: #ff85a8;
    --brand-500: #fc3a72;
    --brand-600: #e51f5b;
    --brand-700: #c00f46;

    /* ---- neutral ramp -----------------------------------------------------
       Anchored on #040407 (ink) and #c8c8c8 (line). The mid steps are
       interpolated on the same slightly-blue axis so greys never look muddy
       next to the pink. */
    --ink-900: #040407;
    --ink-800: #17171c;
    --ink-700: #2c2c34;
    --ink-500: #5c5c68;
    --ink-400: #83838f;
    --ink-300: #c8c8c8;
    --ink-200: #e3e3e6;
    --ink-100: #f1f1f3;
    --ink-000: #ffffff;

    /* Backdrop of the intro stage. Must stay pure white: the clips are lifted
       to a white backdrop by --intro-white-point, and any other value here
       would put their edge back on screen. */
    --paper: #ffffff;

    /* The clips were exported over a near-white backdrop that lands between 240
       and 253 after compression, plus faint ghosting left by the encoder, so on
       a white page the video reads as a pale rectangle. Scaling luminance by
       this factor lifts all of that to 255 — the backdrop is erased rather than
       hidden behind a matching colour, which no single colour could do since the
       backdrop drifts frame to frame. The artwork itself is white, black and
       pink with no mid-greys, so nothing in it is lost.
       Re-measure if the clips are ever re-exported. */
    --intro-white-point: 1.13;

    /* ---- semantic ---------------------------------------------------------
       Components reference these, not the ramps above. */
    --color-text: var(--ink-900);
    --color-text-muted: var(--ink-500);
    --color-text-inverse: var(--ink-000);
    --color-surface: var(--ink-000);
    --color-surface-sunken: var(--ink-100);
    --color-border: var(--ink-200);
    --color-border-strong: var(--ink-300);
    --color-accent: var(--brand-500);
    --color-accent-hover: var(--brand-600);
    --color-accent-active: var(--brand-700);
    --color-focus: var(--brand-500);

    /* ---- typography ----
       Display carries the headings and the brand; body stays on the system
       stack, which costs nothing to load and reads better at small sizes. */
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Unbounded", var(--font-sans);

    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1rem;
    --text-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
    --text-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.65;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---- space scale (4px base) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* ---- radii ---- */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;

    /* ---- elevation ---- */
    --shadow-sm: 0 1px 2px rgb(4 4 7 / 0.05);

    /* ---- motion ---- */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 600ms;

    /* ---- layout ---- */
    --container-width: 68rem;
    --container-gutter: var(--space-5);
}