/* =========================================================
   StinkBugs Theme Tokens (single source of truth)
   - theme.css DEFINES tokens
   - site.css CONSUMES tokens
   - Supports: light | dark | system (via data-theme set by theme.js)
   ========================================================= */

:root{
    color-scheme: light dark;

    /* ---------- LIGHT (default/system baseline) ---------- */
    --sb-bg: #f6f7fb;

    /* surfaces */
    --sb-surface: #ffffff;
    --sb-surface-2: #eef2ff;   /* slightly raised tint */
    --sb-surface-3: #f7f8ff;   /* optional: extra subtle */

    /* text */
    --sb-text: #101828;
    --sb-text-muted: #475467;

    /* borders + shadows */
    --sb-border: rgba(16, 24, 40, 0.14);
    --sb-shadow-1: 0 2px 10px rgba(16,24,40,.08), 0 1px 1px rgba(16,24,40,.05);
    --sb-shadow-2: 0 12px 30px rgba(16,24,40,.12), 0 2px 8px rgba(16,24,40,.08);

    /* brand */
    --sb-accent: #2563eb;                 /* blue */
    --sb-accent-2: #6d28d9;               /* purple */
    --sb-accent-3: #14b8a6;               /* teal */
    --sb-accent-soft: rgba(37, 99, 235, 0.12);
    --sb-accent-contrast: #ffffff;

    /* links */
    --sb-link: #1d4ed8;

    /* focus */
    --sb-focus: 0 0 0 3px rgba(37, 99, 235, 0.28);

    /* “nice background energy” used by wizard headers etc. */
    --sb-grad:
        radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,0.18), transparent 55%),
        radial-gradient(900px 500px at 110% 20%, rgba(109,40,217,0.14), transparent 60%);

    /* ---------- Semantic colors ---------- */
    --sb-success: #16a34a;
    --sb-success-soft: rgba(22,163,74,.12);

    --sb-warning: #d97706;
    --sb-warning-soft: rgba(217,119,6,.14);

    --sb-danger: #dc2626;
    --sb-danger-soft: rgba(220,38,38,.12);

    /* ---------- Aliases (back-compat with older CSS) ---------- */
    --sb-fg: var(--sb-text);
    --sb-muted: var(--sb-text-muted);
    --sb-card: var(--sb-surface);

    /* ring */
    --sb-card-ring: rgba(16, 24, 40, 0.12);

    /* ---------- Bootstrap bridge (helps alerts/progress/buttons/etc.) ---------- */
    --bs-body-bg: var(--sb-bg);
    --bs-body-color: var(--sb-text);
    --bs-secondary-color: var(--sb-text-muted);
    --bs-emphasis-color: var(--sb-text);

    --bs-border-color: var(--sb-border);

    --bs-tertiary-bg: var(--sb-surface);
    --bs-secondary-bg: var(--sb-surface-2);

    --bs-link-color: var(--sb-link);
    --bs-link-hover-color: var(--sb-link);

    --bs-card-bg: var(--sb-surface);
    --bs-dropdown-bg: var(--sb-surface);
}

/* Prefer color-mix where supported (better rings + raised surfaces) */
@supports (color: color-mix(in srgb, white 10%, black)) {
    :root{
        --sb-card-ring: color-mix(in srgb, var(--sb-border) 80%, #fff);

        /* ensure raised surface is a true “lift” from sb-surface */
        --sb-surface-2: color-mix(in srgb, var(--sb-surface) 88%, var(--sb-bg));
        --sb-surface-3: color-mix(in srgb, var(--sb-surface) 94%, var(--sb-bg));
    }
}

/* Force LIGHT (mostly just tells the UA) */
html[data-theme="light"]{
    color-scheme: light;
}

/* Force DARK */
html[data-theme="dark"]{
    color-scheme: dark;

    /* page background */
    --sb-bg: #0b1020;

    /* surfaces */
    --sb-surface: #111a2e;
    --sb-surface-2: #172445;
    --sb-surface-3: #0f1a33;

    /* text */
    --sb-text: #eaf0ff;
    --sb-text-muted: rgba(234, 240, 255, 0.72);

    /* borders + shadows */
    --sb-border: rgba(234, 240, 255, 0.14);
    --sb-shadow-1: 0 2px 10px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.40);
    --sb-shadow-2: 0 16px 36px rgba(0,0,0,.60), 0 2px 10px rgba(0,0,0,.45);

    /* brand (brighter so it reads on dark) */
    --sb-accent: #7aa2ff;
    --sb-accent-2: #c4b5fd;
    --sb-accent-3: #2dd4bf;
    --sb-accent-soft: rgba(122, 162, 255, 0.14);

    /* on bright accents, dark text is often more readable */
    --sb-accent-contrast: #0b0f16;

    /* links */
    --sb-link: #9bb7ff;

    /* focus */
    --sb-focus: 0 0 0 3px rgba(122, 162, 255, 0.30);

    /* “nice background energy” for headers */
    --sb-grad:
        radial-gradient(1100px 600px at 20% -10%, rgba(122,162,255,0.22), transparent 55%),
        radial-gradient(900px 500px at 110% 20%, rgba(196,181,253,0.16), transparent 60%);

    /* Semantic colors tuned for dark */
    --sb-success: #34d399;
    --sb-success-soft: rgba(52,211,153,.14);

    --sb-warning: #fbbf24;
    --sb-warning-soft: rgba(251,191,36,.14);

    --sb-danger: #fb7185;
    --sb-danger-soft: rgba(251,113,133,.14);

    /* Back-compat still maps correctly */
    --sb-fg: var(--sb-text);
    --sb-muted: var(--sb-text-muted);
    --sb-card: var(--sb-surface);

    /* Bootstrap bridge again (explicit in case you override elsewhere) */
    --bs-body-bg: var(--sb-bg);
    --bs-body-color: var(--sb-text);
    --bs-secondary-color: var(--sb-text-muted);
    --bs-emphasis-color: var(--sb-text);

    --bs-border-color: var(--sb-border);

    --bs-tertiary-bg: var(--sb-surface);
    --bs-secondary-bg: var(--sb-surface-2);

    --bs-link-color: var(--sb-link);
    --bs-link-hover-color: var(--sb-link);

    --bs-card-bg: var(--sb-surface);
    --bs-dropdown-bg: var(--sb-surface);
}

/* Dark-mode ring polish when color-mix is supported */
@supports (color: color-mix(in srgb, white 10%, black)) {
    html[data-theme="dark"]{
        --sb-card-ring: color-mix(in srgb, var(--sb-border) 70%, #ffffff14);

        /* keep raised surfaces from getting too bright */
        --sb-surface-2: color-mix(in srgb, var(--sb-surface) 86%, #000);
        --sb-surface-3: color-mix(in srgb, var(--sb-surface) 78%, #000);
    }
}