/*
 * Design tokens. Colors are defined once here and swapped wholesale by
 * body.dark-mode below — components should never hardcode a color, always
 * reference one of these custom properties.
 */

:root {
    --crust: white;
    /* tailwindcss sky 50 */
    --base: oklch(97.7% 0.013 236.62);
    /* tailwindcss sky 100 */
    --surface0: oklch(95.1% 0.026 236.824);
    /* tailwindcss blue 200 */
    --surface1: oklch(88.2% 0.059 254.128);
    /* tailwindcss blue 400 */
    --overlay0: oklch(70.7% 0.165 254.624);
    /* tailwindcss blue 500 */
    --overlay1: oklch(62.3% 0.214 259.815);
    /* tailwindcss blue 600 */
    --overlay2: oklch(54.6% 0.245 262.881);

    /* tailwindcss slate 600 */
    --subtext: oklch(44.6% 0.043 257.281);
    /* tailwindcss slate 900 */
    --text: oklch(20.8% 0.042 265.755);
    --light-text: white;

    /* Controls the width of content from 1480px and above */
    --content-width: 85rem;

    --img-tint: rgba(0, 0, 0, 0.45);
    --drop-shadow: rgba(0, 0, 0, 0.15);

    --topbar-height: 5em;

    /* Shared recipes — reuse instead of repeating the raw declaration */
    --shadow-elevated: 0 4px 8px var(--drop-shadow);
    --gradient-accent: linear-gradient(to bottom, var(--overlay1), var(--overlay2));
    --gradient-surface: linear-gradient(to bottom, var(--surface0), var(--surface1));
    --focus-ring-color: var(--overlay1);

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}

body.dark-mode {
    color-scheme: dark;

    --crust: #030508;
    /* tailwindcss blue 950 */
    --base: oklch(28.2% 0.091 267.935);
    --surface0: #0f172a;
    /* tailwindcss blue 950 */
    --surface1: oklch(28.2% 0.091 267.935);
    /* tailwindcss blue 500 */
    --overlay0: oklch(62.3% 0.214 259.815);
    /* tailwindcss blue 600 */
    --overlay1: oklch(54.6% 0.245 262.881);
    /* tailwindcss blue 400 */
    --overlay2: oklch(70.7% 0.165 254.624);

    /* tailwindcss slate 400 */
    --subtext: oklch(70.4% 0.04 256.788);
    /* tailwindcss slate 200 */
    --text: oklch(92.9% 0.013 255.508);

    /* Variables using other variables need to be recomputed */
    --gradient-accent: linear-gradient(to bottom, var(--overlay1), var(--overlay2));
    --gradient-surface: linear-gradient(to bottom, var(--surface0), var(--surface1));
    --focus-ring-color: var(--overlay1);
}

/*
 * Breakpoints in use across this theme (documented here since plain CSS has
 * no shared custom-media tokens without a build step) — kept as literal
 * min-width values at each call site:
 * 380, 400, 420, 460, 480, 520, 620, 650, 660, 730, 800, 880,
 * 1030, 1250, 1420, 1480
 */