/* Hallmark · macrostructure: Marquee Hero · tone: atmospheric/automotive-performance · anchor hue: hot-pink
 * theme: studied-DNA (source: https://ssstuning.no/) · paper oklch(~13% .02 265) #06080c · accent oklch(~63% .19 358) #E8578A
 * display: Outfit · body: DM Sans · pre-emit critique: P5 H5 E5 S4 R4 V5
 * ------------------------------------------------------------------------
 * DESIGN TOKENS — single source of truth for the SSSTuning landing page.
 * Every colour / font / space / motion value referenced elsewhere lives here.
 */

:root {
    /* ---- Brand palette (preserved exactly from ssstuning.no) ---- */
    --accent: #E8578A;            /* signature hot-pink */
    --accent-dim: rgba(232, 87, 138, 0.15);
    --accent-soft: rgba(232, 87, 138, 0.08);
    --accent-bright: #ff79ad;     /* lighter pink — hover state only */

    --bg-deep: #06080c;           /* page base */
    --bg-dark: #0b0e14;
    --bg-card: #10141c;
    --bg-card-hover: #161b26;
    --bg-surface: #1a1f2e;

    --border: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.10);
    --border-accent: rgba(232, 87, 138, 0.20);

    --text-primary: #f0f2f5;
    --text-secondary: #8b95a8;
    --text-muted: #5a6478;
    --white: #ffffff;
    --success: #34d399;
    --danger: #f87171;

    /* ---- Shadows (neutral, restrained — no coloured glow) ---- */
    --gradient-accent: linear-gradient(135deg, #E8578A 0%, #d8487b 100%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 10px 28px -16px rgba(0, 0, 0, 0.65);
    --shadow-card-hover: 0 16px 36px -18px rgba(0, 0, 0, 0.72);
    --shadow-accent: 0 6px 18px -10px rgba(232, 87, 138, 0.30);

    /* ---- Typography ---- */
    --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Fluid type scale (clamp: min · preferred · max) */
    --text-display: clamp(3rem, 9vw, 6.5rem);
    --text-h1: clamp(2.5rem, 6.5vw, 4.5rem);
    --text-h2: clamp(2rem, 4.6vw, 3.25rem);
    --text-h3: clamp(1.25rem, 2.4vw, 1.6rem);
    --text-h4: clamp(1.05rem, 1.6vw, 1.2rem);
    --text-lead: clamp(1.05rem, 1.5vw, 1.3rem);
    --text-body: 1.0625rem;
    --text-sm: 0.9rem;
    --text-xs: 0.8rem;
    --text-label: 0.78rem;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;

    /* ---- Spacing (4pt scale, semantic) ---- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-section: clamp(4.5rem, 10vw, 8rem);
    --content-max: 1240px;
    --gutter: clamp(1.25rem, 5vw, 3rem);

    /* ---- Radii ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 0.18s;
    --dur-mid: 0.35s;
    --dur-slow: 0.7s;

    /* ---- Layout chrome ---- */
    --header-h: 76px;
    --rule: 1px solid var(--border);
}