/*
 * Design tokens — single source of truth.
 * Values mirror frontend/src/styles/tokens (colors, gradients, spacing).
 */
:root {
    /* colors */
    --color-surface: #f5f7fb;
    --color-surface-alt: #fff;
    --color-text: #1a1d26;
    --color-text-muted: #5c6370;
    --color-primary: #766bf5;
    --color-primary-dark: #4b4593;
    --color-primary-contrast: #fff;
    --color-accent-red: #ef2352;
    --color-border: rgb(26 29 38 / 0.08);
    --color-border-slate: rgba(15, 23, 42, 0.08);
    --color-primary-tint-06: rgba(82, 72, 200, 0.06);
    --color-primary-tint-10: rgba(82, 72, 200, 0.1);
    --color-primary-tint-12: rgba(82, 72, 200, 0.12);
    --color-primary-tint-14: rgba(82, 72, 200, 0.14);

    /* shadows */
    --shadow-card: 0 5.6px 14.4px rgba(26, 29, 38, 0.07);

    /* layout: sole gap from the last content block/section to the site footer */
    --layout-footer-gap: 150px;

    /* accent gradient intermediate stops (primary → accent-red, sass color.mix values precomputed) */
    --color-accent-mix-violet: #9459cc;
    --color-accent-mix-magenta: #b943ab;
    --color-accent-mix-rose: #d73173;

    /* gradients (sass color.mix values precomputed) */
    --gradient-accent-text: linear-gradient(90deg, #766bf5 0%, #766bf5 12%, #9459cc 32%, #b943ab 48%, #d73173 62%, #ef2352 76%, #ef2352 100%);
    --gradient-accent-line: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 32%, var(--color-accent-mix-violet) 52%, var(--color-accent-mix-magenta) 66%, var(--color-accent-mix-rose) 80%, var(--color-accent-red) 92%, var(--color-accent-red) 100%);

    /* typography */
    --font-family-base: 'OS', Helvetica, Arial, sans-serif;
    --font-size-xs: 11.52px;
    --font-size-md: 14.72px;
    --font-size-body: 16px;
    /* title banner h1: base and length steps (see View::PAGE_TITLE_STEPS) */
    --font-size-title: clamp(28px, 3vw, 40px);
    --font-size-title-md: clamp(24px, 2.36vw, 34px);
    --font-size-title-sm: clamp(21px, 1.95vw, 28px);
    --font-size-title-xs: clamp(18px, 1.6vw, 23px);
    --line-height-body: 1.5;
    --font-size-sm: 14px;
    --line-height-sm: 1.45;
    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* spacing scale */
    --space-0: 0;
    --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;
}