/*
 * Shared Design Tokens & Bootstrap Overrides
 *
 * Single source of truth for colours, fonts, common values, and Bootstrap
 * theme customisation. Shared between main app and landing page.
 *
 * In base_core.html this file loads AFTER bootstrap.min.css so that the
 * --bs-* overrides win in the cascade. In base_landing.html (no Bootstrap
 * CSS) it loads first — only the --zw-* tokens are used there.
 *
 * Naming convention: --zw-<category>-<name>
 */

:root {
    /* ── Brand Colours ─────────────────────────────────────── */
    --zw-color-primary-core: #8b3dff;        /* Main app primary (blue) */
    --zw-color-primary-core-rgb: 139, 61, 255; /* RGB triplet for rgba() usage */
    --zw-color-primary-core-hover: #7634d9;  /* Primary hover (85 % darker) */
    --zw-color-primary-core-active: #6f31cc; /* Primary active (80 % darker) */
    --zw-color-primary-landing: #8b3dff;         /* Landing page primary (purple) */
    --zw-color-primary-landing-rgb: 139, 61, 255; /* RGB triplet for rgba() usage */
    --zw-color-primary-landing-hover: #7634d9;    /* Primary hover */
    --zw-color-primary-landing-active: #6f31cc;   /* Primary active / link hover */
    --zw-color-primary-landing-active-border: #682ebf;
    --zw-color-primary-landing-subtle: #e8d8ff;   /* Light tint (bg-subtle) */
    --zw-color-primary-landing-dark: #532599;      /* Dark shade (border-subtle) */
    --zw-color-primary-landing-emphasis: #381866;  /* Darkest (text-emphasis) */
    --zw-color-primary-landing-grad-start: #9b58ff;
    --zw-color-primary-landing-grad-mid: #8837ff;
    --zw-color-primary-landing-grad-end: #7a20ff;

    /* ── Neutral Palette ───────────────────────────────────── */
    --zw-color-white: #fff;
    --zw-color-black: #000;
    --zw-color-gray-50: #f8fafc;
    --zw-color-gray-100: #f2f6fc;
    --zw-color-gray-200: #e2e8f0;
    --zw-color-gray-300: #cbd5e1;
    --zw-color-gray-400: #94a3b8;
    --zw-color-gray-500: #69707a;
    --zw-color-gray-600: #6c757d;
    --zw-color-gray-600-rgb: 108, 117, 125;
    --zw-color-gray-700: #495057;
    --zw-color-gray-800: #2f2f2f;
    --zw-color-gray-900: #212529;

    /* ── Semantic Colours ──────────────────────────────────── */
    --zw-color-error: #8b0d00;
    --zw-color-error-bg: #fad0cc;
    --zw-color-error-border: #f8b9b3;
    --zw-color-success: #008008;
    --zw-color-success-rgb: 0, 128, 8;
    --zw-color-warning: #ffc107;
    --zw-color-warning-rgb: 255, 193, 7;
    --zw-color-info: #17a2b8;
    --zw-color-info-rgb: 23, 162, 184;
    --zw-color-danger: #db1436;
    --zw-color-danger-rgb: 219, 20, 54;

    /* ── Interactive Colours ───────────────────────────────── */
    --zw-color-disabled-bg: #e0e5ec;
    --zw-color-muted-border: #ccc;
    --zw-color-input-bg: #ddd;
    --zw-color-link-hover-core: #7634d9;

    /* ── Font Families ─────────────────────────────────────── */
    --zw-font-sans-core: "Metropolis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --zw-font-sans-landing: "Public Sans", sans-serif;
    --zw-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* ── Borders & Radii ───────────────────────────────────── */
    --zw-border-radius: 0.35rem;
    --zw-border-radius-lg: 0.5rem;
    --zw-border-color: var(--zw-color-gray-200);

    /* ── Z-Index Scale ─────────────────────────────────────── */
    --zw-z-sticky: 1020;
    --zw-z-sidenav: 1038;
    --zw-z-topnav: 1039;
    --zw-z-dropdown: 1050;
    --zw-z-select2: 1055;

    /* ── Bootstrap Overrides ──────────────────────────────── */
    --bs-primary: var(--zw-color-primary-core);
    --bs-primary-rgb: var(--zw-color-primary-core-rgb);
    --bs-link-color: var(--zw-color-primary-core);
    --bs-link-color-rgb: var(--zw-color-primary-core-rgb);
    --bs-link-hover-color: var(--zw-color-primary-core-active);
    --bs-link-hover-color-rgb: var(--zw-color-primary-core-rgb);
    --bs-dropdown-link-active-bg: var(--zw-color-primary-core);
    --bs-card-color: var(--zw-color-primary-core);
    --bs-body-color: var(--zw-color-gray-900);
    --bs-body-bg: var(--zw-color-white);
    --bs-border-color: var(--zw-border-color);
    --bs-border-radius: var(--zw-border-radius);
    --bs-border-radius-lg: var(--zw-border-radius-lg);
    --bs-success: var(--zw-color-success);
    --bs-success-rgb: var(--zw-color-success-rgb);
    --bs-warning: var(--zw-color-warning);
    --bs-warning-rgb: var(--zw-color-warning-rgb);
    --bs-danger: var(--zw-color-danger);
    --bs-danger-rgb: var(--zw-color-danger-rgb);
    --bs-info: var(--zw-color-info);
    --bs-info-rgb: var(--zw-color-info-rgb);
    --bs-focus-ring-color: rgba(var(--zw-color-primary-core-rgb), 0.25);
}

/* ── Bootstrap Component Overrides ────────────────────────── */
.btn-primary {
    --bs-btn-bg: var(--zw-color-primary-core);
    --bs-btn-border-color: var(--zw-color-primary-core);
    --bs-btn-hover-bg: var(--zw-color-primary-core-hover);
    --bs-btn-hover-border-color: var(--zw-color-primary-core-active);
    --bs-btn-focus-shadow-rgb: var(--zw-color-primary-core-rgb);
    --bs-btn-active-bg: var(--zw-color-primary-core-active);
    --bs-btn-active-border-color: var(--zw-color-link-hover-core);
    --bs-btn-disabled-bg: var(--zw-color-primary-core);
    --bs-btn-disabled-border-color: var(--zw-color-primary-core);
}

.btn-outline-primary {
    --bs-btn-color: var(--zw-color-primary-core);
    --bs-btn-border-color: var(--zw-color-primary-core);
    --bs-btn-hover-bg: var(--zw-color-primary-core);
    --bs-btn-hover-border-color: var(--zw-color-primary-core);
    --bs-btn-focus-shadow-rgb: var(--zw-color-primary-core-rgb);
    --bs-btn-active-bg: var(--zw-color-primary-core);
    --bs-btn-active-border-color: var(--zw-color-primary-core);
    --bs-btn-disabled-color: var(--zw-color-primary-core);
    --bs-btn-disabled-border-color: var(--zw-color-primary-core);
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--zw-color-white);
    --bs-nav-pills-link-active-bg: var(--zw-color-primary-core);
}

.nav-link {
    --bs-nav-link-hover-color: var(--zw-color-primary-core-hover);
}

.bg-primary {
    background-color: rgba(var(--zw-color-primary-core-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-primary {
    color: rgba(var(--zw-color-primary-core-rgb), var(--bs-text-opacity, 1)) !important;
}

.border-primary {
    border-color: var(--zw-color-primary-core) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--zw-color-primary-core);
    box-shadow: 0 0 0 0.25rem rgba(var(--zw-color-primary-core-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--zw-color-primary-core);
    border-color: var(--zw-color-primary-core);
}

.form-check-input:focus {
    border-color: var(--zw-color-primary-core);
    box-shadow: 0 0 0 0.25rem rgba(var(--zw-color-primary-core-rgb), 0.25);
}

.form-switch .form-check-input:checked {
    background-color: var(--zw-color-primary-core);
    border-color: var(--zw-color-primary-core);
}

.pagination .active > .page-link,
.pagination .page-link.active {
    background-color: var(--zw-color-primary-core);
    border-color: var(--zw-color-primary-core);
}

.page-link {
    color: var(--zw-color-primary-core);
}

.page-link:hover {
    color: var(--zw-color-primary-core-hover);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--zw-color-primary-core);
}

.progress-bar {
    background-color: var(--zw-color-primary-core);
}