/*
 * Bishop Vault - design tokens. The single source of truth for colour, type, size and shape.
 * Nothing else in the UI hard-codes a hex value, so editing this file re-themes the whole product.
 *
 * Gold is sampled from the official Bishop mark (#FFCC00); the navy surfaces are the palette supplied for
 * this project. Verify against the Bishop Integrated Solutions brand guide.
 *
 * Light mode later: add a [data-theme="light"] block that overrides the same variables and set
 * <html data-theme="light" data-bs-theme="light">. No component CSS needs to change.
 */
:root,
[data-theme="dark"] {
    /* ---- Brand accent (use sparingly: primary actions, active nav, selection, focus) ---- */
    --bishop-gold: #ffcc00;
    --bishop-gold-hover: #e6b800;
    --bishop-gold-rgb: 255, 204, 0;
    --bishop-gold-tint: rgba(var(--bishop-gold-rgb), .08);
    --bishop-gold-tint-strong: rgba(var(--bishop-gold-rgb), .14);
    --bishop-on-gold: #1a1400;
    --focus-ring: 0 0 0 3px rgba(var(--bishop-gold-rgb), .22);

    /* ---- Surfaces: only three tones (+ a neutral hover wash) ---- */
    --bg-page: #08111f;
    --bg-page-gradient: linear-gradient(135deg, #07101c, #0b1626);
    --bg-sidebar: #0a1424;
    --bg-surface: #0d1828;            /* panels, menus, modals, secondary buttons */
    --bg-hover: rgba(255, 255, 255, .04);
    --bg-overlay: #040911;
    --bg-surface-hover: var(--bg-hover);                 /* hovered rows / items */
    --bg-selected: var(--bishop-gold-tint);              /* selected tree item / row (subtle gold) */
    --bg-selected-strong: var(--bishop-gold-tint-strong);

    /* ---- Lines (quiet) ---- */
    --border: rgba(255, 255, 255, .06);
    --border-strong: rgba(255, 255, 255, .12);
    --border-default: var(--border);
    --border-selected: rgba(var(--bishop-gold-rgb), .35);

    --qr-bg: #ffffff;                 /* QR codes need a light ground to scan */

    /* ---- Text ---- */
    --text-primary: #eef2f7;
    --text-strong: #ffffff;
    --text-secondary: #b6c0cd;
    --text-muted: #8d9aab;

    /* ---- Status ---- */
    --success: #38d996;
    --success-rgb: 56, 217, 150;
    --danger: #ff5d6c;
    --danger-rgb: 255, 93, 108;
    --danger-hover: #e8495a;
    --warning: #ffcc00;
    --warning-rgb: 255, 204, 0;
    --info: #5aa9ff;
    --info-rgb: 90, 169, 255;

    /* ---- Tints used by badges (low-opacity backgrounds; never neon) ---- */
    --tint-gold: 255, 204, 0;
    --tint-blue: 90, 169, 255;
    --tint-purple: 167, 139, 250;
    --tint-rose: 255, 107, 129;
    --tint-teal: 45, 212, 191;

    /* ---- Type ---- */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-title: 1.75rem;      /* 28px page title */
    --fs-section: 1rem;       /* 16px section title */
    --fs-body: .875rem;       /* 14px */
    --fs-small: .8125rem;     /* 13px */
    --fs-tiny: .75rem;        /* 12px */
    --fs-nav: .9375rem;       /* 15px sidebar */

    /* ---- Shape ---- */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;

    /* ---- Spacing scale (4 / 8 / 12 / 16 / 20 / 24 / 32) ---- */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-pop: 0 14px 34px rgba(0, 0, 0, .5);

    /* ---- Sizing ---- */
    --control-height: 40px;
    --control-height-sm: 32px;
    --icon-btn: 36px;
    --row-height: 56px;
    --sidebar-width: 232px;
    --content-max: 1500px;
    --page-x: 32px;
    --topbar-height: 64px;
    --logo-area-height: 76px;
    --bottomnav-height: 60px;

    /* ---- Motion ---- */
    --ease: 150ms ease;
}

@media (max-width: 1199.98px) {
    :root { --page-x: 24px; }
}
@media (max-width: 991.98px) {
    :root { --page-x: 16px; }
}