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

:root {
    --bg: var(--color-zinc-950);
    --bg2: var(--color-zinc-900);
    --bg3: var(--color-zinc-800);

    --surface: color-mix(in oklch, var(--color-zinc-400) 8%, transparent);
    --surface2: color-mix(in oklch, var(--color-zinc-400) 14%, transparent);
    --surface3: color-mix(in oklch, var(--color-zinc-400) 22%, transparent);

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

    --text: var(--color-white);
    --text2: var(--color-zinc-200);
    --text3: var(--color-zinc-400);

    --accent: var(--color-blue-500);
    --accent-soft: color-mix(in oklch, var(--accent) 22%, transparent);
    --accent2: var(--color-blue-600);
    --accent-strong: var(--color-blue-700);

    --green: var(--color-green-500);
    --orange: var(--color-orange-500);
    --red: var(--color-red-500);
    --gold: var(--color-yellow-500);

    --green-soft: color-mix(in oklch, var(--green) 18%, transparent);
    --orange-soft: color-mix(in oklch, var(--orange) 18%, transparent);
    --red-soft: color-mix(in oklch, var(--red) 18%, transparent);
    --gold-soft: color-mix(in oklch, var(--gold) 18%, transparent);

    --link: var(--accent);
    --link-hover: var(--accent2);
    --text-on-accent: #ffffff;

    --focus-ring: color-mix(in oklch, var(--accent) 60%, transparent);

    --header-bg: var(--bg2);
    --header-fg: var(--text);
    --header-border: var(--border);

    --footer-bg: var(--bg2);
    --footer-fg: var(--text2);

    --tabbar-bg: var(--bg2);
    --tabbar-fg: var(--text2);
    --tabbar-active: var(--accent);

    --sidebar-bg: var(--bg2);
    --sidebar-fg: var(--text2);
    --sidebar-active: var(--accent);

    --button-bg: var(--accent);
    --button-fg: var(--text-on-accent);
    --button-hover: var(--accent2);

    --card-bg: var(--surface);
    --card-border: var(--border);

    --modal-bg: var(--bg2);
    --modal-overlay: color-mix(in oklch, black 60%, transparent);

    --tooltip-bg: var(--text);
    --tooltip-fg: var(--bg);

    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-fg: var(--text);
    --input-focus: var(--accent);

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.35);

    --bg-image: none;
    --bg-image-mobile: none;

}