:root {
    /* Brand primitives, from assets/design.png. These never change with the theme. */
    --hf-mint: #00FFA3;
    --hf-blue: #1A8EF0;
    --hf-slate: #1F2D46;
    --hf-night: #131A26;
    --hf-cloud: #F7F8FA;
    --hf-orchid: #F778FA;

    --hf-font-heading: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --hf-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

    --hf-radius: 12px;
    --hf-shadow: 0 10px 30px rgba(0, 255, 163, 0.15);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --radius-md: 8px;

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

[data-theme="dark"] {
    --bg-tertiary: hsl(218 39% 26%);
    --text-primary: var(--hf-cloud);
    --text-secondary: hsl(220 15% 70%);
    --border-color: hsl(218 30% 32%);
    --accent: var(--hf-mint);
    --success: var(--hf-mint);
    --warning: var(--hf-orchid);
    --shadow-md: var(--hf-shadow);
}

/* Mint at its brand lightness is unreadable on Cloud, so light mode darkens it for text.
   The mint itself survives on button fills, where Night sits on it at 13.16:1. */
[data-theme="light"] {
    --bg-tertiary: hsl(220 20% 92%);
    --text-primary: var(--hf-night);
    --text-secondary: hsl(218 20% 40%);
    --border-color: hsl(218 20% 85%);
    --accent: hsl(158 100% 24%);
    --success: hsl(158 100% 24%);
    --warning: hsl(299 60% 42%);
    --shadow-md: 0 4px 6px rgba(19, 26, 38, 0.1);
}