/**
 * checkplay — global color tokens (single source of truth)
 * Change colors HERE only. app.css, portals, auth, campus, checkpoint
 * and shop components reference these variables — do not duplicate hex
 * values elsewhere unless a one-off is truly required.
 */
:root {
    /* ── Brand primary (buttons, links, active nav) ── */
    --cp-blue: #3d8bfd;
    --cp-blue-hover: #2f7af0;
    --cp-blue-active: #2568d1;
    --cp-blue-soft: rgba(61, 139, 253, 0.16);
    --cp-blue-focus-ring: rgba(61, 139, 253, 0.22);
    --cp-blue-border: rgba(61, 139, 253, 0.18);

    /* ── Brand accent ── */
    --cp-orange: #f97316;
    --cp-brand-play: #ef4444;
    --cp-danger: #dc3545;
    --cp-danger-hover: #bb2d3b;
    --cp-danger-subtle: rgba(220, 53, 69, 0.18);

    /* ── Dark navy surfaces (portals, auth, dashboards) ── */
    --cp-navy-bg: #070b18;
    --cp-navy-bg-deep: #040a18;
    --cp-navy-bg-mid: #061026;
    --cp-navy-surface: #0e1730;
    --cp-navy-card: #121a33;
    --cp-navy-card-rgb: 18, 26, 51;
    --cp-navy-inner: #0d152c;
    --cp-navy-input: #0c1428;
    --cp-navy-border: rgba(154, 168, 199, 0.16);
    --cp-navy-border-strong: rgba(154, 168, 199, 0.28);
    --cp-navy-overlay-light: rgba(7, 11, 24, 0.22);
    --cp-navy-overlay-mid: rgba(7, 11, 24, 0.42);
    --cp-navy-overlay-heavy: rgba(7, 11, 24, 0.62);
    --cp-auth-card-bg: rgba(18, 26, 51, 0.92);
    --cp-auth-card-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
    --cp-auth-link-hover: #ffffff;

    /* ── Campus / schooling ── */
    --cp-campus-bg: #071534;
    --cp-campus-bg-rgb: 7, 21, 52;
    --cp-navy-bg-rgb: 7, 11, 24;
    --cp-blue-rgb: 61, 139, 253;
    --cp-campus-teal-glow: rgba(10, 179, 156, 0.08);
    --cp-campus-blue-glow: rgba(61, 139, 253, 0.15);

    /* ── Typography on dark ── */
    --cp-text: #ffffff;
    --cp-text-soft: #f8fafc;
    --cp-text-on-dark: #e8ecf4;
    --cp-muted: #9aa8c7;
    --cp-ink: #1a1d23;
    --cp-sidebar-bg: #030712;
    --cp-sidebar-text: #ffffff;
    --cp-sidebar-muted: #9aa8c7;
    --cp-auth-header-bg: rgba(var(--cp-navy-card-rgb), 0.95);

    /* ── Portal accent (overridden per request in app.blade.php from WebApp DB) ── */
    --cp-portal-accent: #16213d;

    /* ── Static WebApp fallbacks (Admin → WebApps theme when DB unavailable) ── */
    --cp-portal-finance: #16213d;
    --cp-portal-app: #16213d;
    --cp-portal-compliance: #16213d;
    --cp-portal-campus: #dc3545;
    --cp-portal-shop: #111827;
    --cp-portal-checkpoint: #000000;
    --cp-portal-authority: #0f766e;
    --cp-portal-provider: #111827;

    /* ── Checkpoint (aliases → brand tokens, same look) ── */
    --checkpoint-accent: var(--cp-danger);
    --checkpoint-accent-hover: var(--cp-danger-hover);
    --checkpoint-accent-subtle: var(--cp-danger-subtle);
    --checkpoint-bg: var(--cp-navy-bg);
    --checkpoint-card: var(--cp-navy-card);
    --checkpoint-surface: var(--cp-navy-surface);
    --checkpoint-text: var(--cp-text-soft);
    --checkpoint-muted: var(--cp-muted);
    --checkpoint-line: var(--cp-navy-border);

    /* ── Location / customer forms ── */
    --cp-loc-border: rgba(61, 139, 253, 0.22);
    --cp-loc-border-strong: var(--cp-blue);
    --cp-loc-ink: var(--cp-text);
    --cp-loc-muted: var(--cp-muted);
    --cp-loc-surface: var(--cp-navy-card);
    --cp-loc-accent: var(--cp-blue);

    /* ── Bootstrap / Velzon bridge (dark theme) ── */
    --vz-primary: var(--cp-blue);
    --vz-primary-rgb: 61, 139, 253;
    --bs-primary: var(--cp-blue);
    --bs-primary-rgb: 61, 139, 253;
    --tb-primary: var(--cp-blue);
    --tb-primary-rgb: 61, 139, 253;
    --tb-secondary-bg: var(--cp-navy-input);
    --tb-body-color: var(--cp-text);
    --tb-border-color: var(--cp-navy-border-strong);
    --tb-border-color-translucent: var(--cp-navy-border-strong);
    --tb-btn-bg: var(--cp-blue);
    --tb-btn-border-color: var(--cp-blue);
    --tb-btn-hover-bg: var(--cp-blue-hover);
    --tb-btn-hover-border-color: var(--cp-blue-hover);
    --tb-btn-color: var(--cp-text);
}

/* ── Light mode — old combination (before dark navy, ~17 Aug)
   Light content + light topbar + dark sidebar + red brand (#c0392b)
   ── */
[data-bs-theme='light'] {
    /* Brand primary — original red (buttons, links, active nav) */
    --cp-blue: #c0392b;
    --cp-blue-hover: #a83226;
    --cp-blue-active: #962d22;
    --cp-blue-soft: rgba(192, 57, 43, 0.1);
    --cp-blue-focus-ring: rgba(192, 57, 43, 0.22);
    --cp-blue-border: rgba(192, 57, 43, 0.28);
    --cp-blue-rgb: 192, 57, 43;

    --cp-navy-bg: #f3f6f9;
    --cp-navy-bg-deep: #eef0f7;
    --cp-navy-bg-mid: #f8fafc;
    --cp-navy-surface: #ffffff;
    --cp-navy-card: #ffffff;
    --cp-navy-card-rgb: 255, 255, 255;
    --cp-navy-inner: #f8f9fa;
    --cp-navy-input: #ffffff;
    --cp-navy-border: #e9ebec;
    --cp-navy-border-strong: #ced4da;
    --cp-navy-overlay-light: rgba(255, 255, 255, 0.15);
    --cp-navy-overlay-mid: rgba(255, 255, 255, 0.45);
    --cp-navy-overlay-heavy: rgba(255, 255, 255, 0.72);
    --cp-auth-card-bg: #ffffff;
    --cp-auth-card-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    --cp-auth-link-hover: var(--cp-blue);

    --cp-campus-bg: #f3f6f9;
    --cp-campus-bg-rgb: 243, 246, 249;
    --cp-navy-bg-rgb: 243, 246, 249;

    --cp-text: #212529;
    --cp-text-soft: #1f242e;
    --cp-text-on-dark: #495057;
    --cp-muted: #878a99;
    --cp-ink: #1a1d23;
    --cp-sidebar-bg: #181a20;
    --cp-sidebar-text: #eef0f7;
    --cp-sidebar-muted: #97979a;
    --cp-auth-header-bg: rgba(255, 255, 255, 0.98);

    --cp-campus-teal-glow: rgba(10, 179, 156, 0.06);
    --cp-campus-blue-glow: rgba(192, 57, 43, 0.08);

    --cp-loc-border: rgba(192, 57, 43, 0.22);
    --cp-loc-border-strong: var(--cp-blue);
    --cp-loc-accent: var(--cp-blue);

    --vz-primary: #dc3545;
    --vz-primary-rgb: 220, 53, 69;
    --bs-primary: #dc3545;
    --bs-primary-rgb: 220, 53, 69;
    --tb-primary: #c0392b;
    --tb-primary-rgb: 192, 57, 43;
    --tb-secondary-bg: #ffffff;
    --tb-body-bg: #f3f6f9;
    --tb-body-color: var(--cp-text);
    --tb-border-color: #e9ebec;
    --tb-border-color-translucent: rgba(0, 0, 0, 0.08);
    --tb-btn-bg: #c0392b;
    --tb-btn-border-color: #c0392b;
    --tb-btn-hover-bg: #a83226;
    --tb-btn-hover-border-color: #a83226;
    --tb-btn-color: #ffffff;
}