/* ==========================================================================
   QADEEM BRAND — Colour token overrides
   Dark, white, grey — clean and professional (Cursor / ChatGPT tone).
   Load AFTER custom.css and tk-design-system.css.
   Source of truth: BRAND_GUIDELINES.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-system tokens (light root — kept for completeness but app is
      dark-only; actual values come from the [data-theme="dark"] block below)
   -------------------------------------------------------------------------- */
:root {
    /* Backgrounds */
    --bg-0: #ffffff;
    --bg-1: #f5f5f5;
    --bg-2: #ebebeb;
    --bg-3: #e0e0e0;
    --line: rgba(0, 0, 0, 0.10);
    --line-2: rgba(0, 0, 0, 0.16);

    /* Text */
    --fg-0: #111111;
    --fg-1: #333333;
    --fg-2: #555555;
    --fg-3: #737373;

    /* Accent — white primary button in dark, black in light */
    --signal: #111111;
    --signal-fg: #ffffff;
    --signal-glow: color-mix(in srgb, #111111 35%, transparent);
    --signal-soft: color-mix(in srgb, #111111 12%, var(--bg-1));

    /* Semantic */
    --ok:   #16a34a;
    --warn: #d97706;
    --err:  #ef4444;
    --info: #2563eb;

    /* Bootstrap overrides (light) */
    --bs-primary: #111111;
    --bs-primary-rgb: 17, 17, 17;
    --bs-body-bg: #ffffff;
    --bs-body-color: #111111;
}

/* --------------------------------------------------------------------------
   2. Dark theme — MAIN brand look
   -------------------------------------------------------------------------- */
[data-theme="dark"],
html[data-bs-theme="dark"] {
    /* Backgrounds */
    --bg-0: #111111;        /* canvas */
    --bg-1: #1e1e1e;        /* cards / panels */
    --bg-2: #171717;        /* alt panels / tabs */
    --bg-3: #1a1a1a;

    /* Borders */
    --line:   rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.12);

    /* Text */
    --fg-0: #ececec;        /* primary text */
    --fg-1: #d4d4d4;        /* secondary labels */
    --fg-2: #8a8a8a;        /* muted text */
    --fg-3: #525252;        /* fine print */

    /* Accent — white button, black text on it */
    --signal:       #ffffff;
    --signal-fg:    #0a0a0a;
    --signal-glow:  rgba(255, 255, 255, 0.18);
    --signal-soft:  rgba(255, 255, 255, 0.07);

    /* Semantic */
    --ok:   #34d399;    /* success / mint */
    --warn: #fbbf24;    /* warning */
    --err:  #f87171;    /* danger */
    --info: #60a5fa;    /* info / links */

    /* Bootstrap overrides (dark) */
    --bs-primary:        #ffffff;
    --bs-primary-rgb:    255, 255, 255;
    --bs-body-bg:        #111111;
    --bs-body-color:     #ececec;
    --bs-secondary:      #8a8a8a;
    --bs-success:        #34d399;
    --bs-info:           #60a5fa;
    --bs-warning:        #fbbf24;
    --bs-danger:         #f87171;
    --bs-success-rgb:    52, 211, 153;
    --bs-info-rgb:       96, 165, 250;
    --bs-warning-rgb:    251, 191, 36;
    --bs-danger-rgb:     248, 113, 113;

    /* Shadows — dark */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.30);
}

/* --------------------------------------------------------------------------
   3. Primary button — use --signal-fg so text stays dark on white button
   -------------------------------------------------------------------------- */
body.v2-shell .btn-primary,
body.v2-shell .btn-primary:hover,
body.v2-shell .btn-primary:focus {
    color: var(--signal-fg) !important;
}

/* --------------------------------------------------------------------------
   4. Bootstrap utility classes that hard-code a specific primary shade
   -------------------------------------------------------------------------- */
[data-theme="dark"] body.v2-shell .bg-primary,
[data-theme="dark"] body.v2-shell .btn-primary {
    background-color: var(--signal) !important;
    border-color: var(--signal) !important;
}

/* --------------------------------------------------------------------------
   5. Sidebar / rail dark background
   -------------------------------------------------------------------------- */
[data-theme="dark"] body.v2-shell .tk-rail {
    background: #0d0d0d;
    border-right-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] body.v2-shell .tk-panel {
    background: #111111;
    border-right-color: rgba(255, 255, 255, 0.07);
}

/* --------------------------------------------------------------------------
   6. Topbar (sticky header)
   -------------------------------------------------------------------------- */
[data-theme="dark"] body.v2-shell .layout-navbar {
    background: rgba(17, 17, 17, 0.94) !important;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

/* --------------------------------------------------------------------------
   7. Force dark theme on html element when JS hasn't run yet
      (prevents white flash on page load for dark-only app)
   -------------------------------------------------------------------------- */
html:not([data-theme="light"]) {
    color-scheme: dark;
}