/*
 * Design tokens — Hedvig palette (see CLAUDE.md). Change colors here only.
 */
:root {
    --bg: #EEEEEE;
    --surface: #FFFFFF;
    --text: #111111;
    --text-strong: #000000;
    --text-soft: #1F1F1F;
    --muted: #999999;
    --muted-2: #99A0B0;
    --dark: #080C12;
    --dark-2: #0E131D;
    --accent: #0099FF;
    --accent-2: #FE6819;

    --font-sans: "Google Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Hedvig: 16px small cards, 40px large panels, 50px pills, layered soft shadow */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-pill: 50px;
    --shadow: 0 .6px 1.6px -1.5px rgba(0, 0, 0, .17), 0 2.3px 6px -3px rgba(0, 0, 0, .14), 0 10px 26px -4.5px rgba(0, 0, 0, .02);

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --space-7: 6rem;

    --container: 1200px;
    --container-narrow: 810px;
    --gutter: clamp(16px, 4vw, 40px);

    --ease: cubic-bezier(.2, .7, .2, 1);
}