/* ============================================================
   Auto-generated theme — do not edit by hand.
   Name: dark-blue
   Source of truth: data/json/theme.json
   ============================================================ */

:root {
    /* ── Backgrounds ── */
    --bg: var(--color-slate-950);
    --bg2: var(--color-slate-900);
    --bg3: var(--color-slate-800);

    /* ── Surfaces ── */
    --surface: color-mix(in oklch, var(--color-slate-400) 8%, transparent);
    --surface2: color-mix(in oklch, var(--color-slate-400) 14%, transparent);
    --surface3: color-mix(in oklch, var(--color-slate-400) 22%, transparent);

    /* ── Borders ── */
    --border: color-mix(in oklch, var(--color-white) 7%, transparent);
    --border2: color-mix(in oklch, var(--color-white) 13%, transparent);

    /* ── Text ── */
    --text: var(--color-white);
    --text2: var(--color-slate-200);
    --text3: var(--color-slate-400);

    /* ── Brand / Accent ── */
    --accent: var(--color-blue-500);
    --accent2: var(--color-blue-600);

    /* ── Status ── */
    --green: var(--color-green-500);
    --orange: var(--color-orange-500);
    --red: var(--color-red-500);
    --gold: var(--color-yellow-500);

    /* ── Header ── */
    --header-bg: #00257a;
    --header-fg: var(--text);
    --header-border: var(--border);

    /* ── Footer ── */
    --footer-bg: var(--bg2);
    --footer-fg: var(--text2);

    /* ── Tabbar ── */
    --tabbar-bg: var(--bg2);
    --tabbar-fg: var(--text2);
    --tabbar-active: var(--accent);

    /* ── Button ── */
    --button-bg: var(--accent);
    --button-fg: #ffffff;
    --button-hover: var(--accent2);

    /* ── Card ── */
    --card-bg: var(--surface);
    --card-border: var(--border);

}