/*
 * Bug Tracker - Design tokens
 * Copyright (c) 2026 Sven Gauditz - https://pixagentur.com
 *
 * Single source of truth for the whole module's look. Every color / spacing /
 * radius / shadow is a CSS custom property scoped to .bt-scope so it can never
 * leak into Perfex' own Bootstrap chrome. Themes are pure token overrides of
 * this Aurora base (see assets/themes/<key>/theme.css); light/dark is switched
 * via the [data-mode] attribute on the same wrapper. Expanded per-theme in the
 * theme-system milestone.
 */

.bt-scope {
    /* Brand */
    --bt-primary: #5b5ef4;
    --bt-primary-600: #4a4ddf;
    --bt-primary-700: #3d40c4;
    --bt-accent: #7c5cff;
    --bt-on-primary: #ffffff;

    /* Surfaces (light defaults) */
    --bt-bg: #f6f7fb;
    --bt-surface: #ffffff;
    --bt-surface-2: #f1f3f9;
    --bt-surface-3: #e9ecf5;
    --bt-border: #e4e7ee;
    --bt-border-strong: #d4d9e4;

    /* Text */
    --bt-text: #1c2333;
    --bt-text-muted: #5a6473;
    --bt-text-faint: #8a93a6;

    /* Status hues */
    --bt-success: #16a34a;
    --bt-warning: #d97706;
    --bt-danger: #dc2626;
    --bt-info: #0ea5e9;

    /* Geometry */
    --bt-radius: 12px;
    --bt-radius-sm: 8px;
    --bt-radius-lg: 18px;
    --bt-gap: 16px;

    /* Elevation */
    --bt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --bt-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
    --bt-shadow-lg: 0 12px 40px rgba(16, 24, 40, .12);

    /* Typography */
    --bt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bt-fs: 14px;
}

/* Dark mode — explicit toggle wins over system preference. */
.bt-scope[data-mode="dark"] {
    --bt-primary: #7c7dff;
    --bt-primary-600: #6b6cf5;
    --bt-primary-700: #5a5be8;
    --bt-accent: #9b7bff;

    --bt-bg: #0e1016;
    --bt-surface: #161922;
    --bt-surface-2: #1d212c;
    --bt-surface-3: #252a37;
    --bt-border: #272c3a;
    --bt-border-strong: #343a4b;

    --bt-text: #e7e9f0;
    --bt-text-muted: #9aa3b5;
    --bt-text-faint: #6b7488;

    --bt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --bt-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);
    --bt-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
}

/* System preference when no explicit mode is set. */
@media (prefers-color-scheme: dark) {
    .bt-scope[data-mode="system"] {
        --bt-primary: #7c7dff;
        --bt-primary-600: #6b6cf5;
        --bt-accent: #9b7bff;
        --bt-bg: #0e1016;
        --bt-surface: #161922;
        --bt-surface-2: #1d212c;
        --bt-surface-3: #252a37;
        --bt-border: #272c3a;
        --bt-border-strong: #343a4b;
        --bt-text: #e7e9f0;
        --bt-text-muted: #9aa3b5;
        --bt-text-faint: #6b7488;
        --bt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --bt-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);
        --bt-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
    }
}

/* =========================================================================
 *  THEMES — pure token overrides of the Aurora base, selected via data-theme.
 *  Each ships a light and a dark variant (Terminal is dark-first). Same markup
 *  everywhere; only these values change. (frontend-design: distinct palettes,
 *  considered geometry & typography per theme.)
 * ========================================================================= */

/* ---- Daylight: crisp, neutral, high-contrast, flat ---- */
.bt-scope[data-theme="daylight"] {
    --bt-primary: #2563eb;
    --bt-primary-600: #1d4ed8;
    --bt-primary-700: #1e40af;
    --bt-accent: #2563eb;
    --bt-bg: #ffffff;
    --bt-surface: #ffffff;
    --bt-surface-2: #f4f6f8;
    --bt-surface-3: #e9edf2;
    --bt-border: #dfe3e8;
    --bt-border-strong: #c8cfd8;
    --bt-text: #0f172a;
    --bt-text-muted: #475569;
    --bt-text-faint: #94a3b8;
    --bt-radius: 8px;
    --bt-radius-sm: 6px;
    --bt-radius-lg: 12px;
    --bt-shadow-sm: 0 1px 1px rgba(15, 23, 42, .04);
    --bt-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    --bt-shadow-lg: 0 8px 24px rgba(15, 23, 42, .10);
}
.bt-scope[data-theme="daylight"][data-mode="dark"] {
    --bt-bg: #0b1220;
    --bt-surface: #111a2b;
    --bt-surface-2: #16213a;
    --bt-surface-3: #1e2c4a;
    --bt-border: #243352;
    --bt-border-strong: #324a6b;
    --bt-text: #e6edf6;
    --bt-text-muted: #9fb0c8;
    --bt-text-faint: #6b7d99;
    --bt-primary: #3b82f6;
}
@media (prefers-color-scheme: dark) {
    .bt-scope[data-theme="daylight"][data-mode="system"] {
        --bt-bg: #0b1220;
        --bt-surface: #111a2b;
        --bt-surface-2: #16213a;
        --bt-surface-3: #1e2c4a;
        --bt-border: #243352;
        --bt-border-strong: #324a6b;
        --bt-text: #e6edf6;
        --bt-text-muted: #9fb0c8;
        --bt-text-faint: #6b7d99;
        --bt-primary: #3b82f6;
    }
}

/* ---- Perfex-Native: Perfex blue/green, square Bootstrap feel ---- */
.bt-scope[data-theme="perfex"] {
    --bt-primary: #03a9f4;
    --bt-primary-600: #0398dc;
    --bt-primary-700: #0277bd;
    --bt-accent: #84c529;
    --bt-on-primary: #ffffff;
    --bt-bg: #f7f7f7;
    --bt-surface: #ffffff;
    --bt-surface-2: #f2f3f5;
    --bt-surface-3: #e7e9ec;
    --bt-border: #e3e6ea;
    --bt-border-strong: #cfd4da;
    --bt-text: #37404a;
    --bt-text-muted: #657180;
    --bt-text-faint: #9aa4af;
    --bt-radius: 4px;
    --bt-radius-sm: 3px;
    --bt-radius-lg: 6px;
}
.bt-scope[data-theme="perfex"][data-mode="dark"] {
    --bt-bg: #1b2127;
    --bt-surface: #222a31;
    --bt-surface-2: #283139;
    --bt-surface-3: #313c45;
    --bt-border: #374049;
    --bt-border-strong: #45525c;
    --bt-text: #e7ebee;
    --bt-text-muted: #a6b0ba;
    --bt-text-faint: #71808c;
}

/* ---- Terminal: dark-first, neon-on-black, monospace, sharp ---- */
.bt-scope[data-theme="terminal"],
.bt-scope[data-theme="terminal"][data-mode="light"],
.bt-scope[data-theme="terminal"][data-mode="dark"],
.bt-scope[data-theme="terminal"][data-mode="system"] {
    --bt-primary: #22c55e;
    --bt-primary-600: #16a34a;
    --bt-primary-700: #15803d;
    --bt-accent: #22d3ee;
    --bt-on-primary: #04130a;
    --bt-bg: #0a0e12;
    --bt-surface: #0f141a;
    --bt-surface-2: #141b22;
    --bt-surface-3: #1b242d;
    --bt-border: #222d36;
    --bt-border-strong: #2e3b46;
    --bt-text: #d7e0d9;
    --bt-text-muted: #8b9a8f;
    --bt-text-faint: #5d6b62;
    --bt-radius: 3px;
    --bt-radius-sm: 2px;
    --bt-radius-lg: 4px;
    --bt-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --bt-shadow-sm: none;
    --bt-shadow: 0 0 0 1px rgba(34, 197, 94, .08);
    --bt-shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
}