/* SelfieSign design tokens — single source of truth for COLOR.
   Companion to typography.css (which owns FONT).

   Link order in every <head>:
       bootstrap → bootstrap-icons → Google Fonts → theme.css → typography.css → page <style>

   theme.css sits after Bootstrap so its --bs-* overrides win, and before typography.css
   so the font layer stays the last word on font-family.

   Before this file every page carried its own :root block. Thirteen pages defined
   --ds-* locally (in three drifting subsets) and thirty-three used the names without
   defining them; a second, unrelated --primary (#5b8cff blue) lived on the dashboard,
   reports, svs-verify and upgrade. Everything now resolves here. */

:root {
    /* ===== Brand =====
       The purple bar across the top of every page. */
    --ds-brand-start: #460582;
    --ds-brand-end: #7F53CF;
    --ds-brand: var(--ds-brand-end);
    --ds-brand-gradient: linear-gradient(90deg, var(--ds-brand-start), var(--ds-brand-end));
    --ds-on-brand: #ffffff;
    --ds-on-brand-muted: rgba(255, 255, 255, 0.85);

    /* ===== Primary action colour =====
       Indigo, one step brighter than the brand purple so buttons read as
       interactive against the header rather than blending into it. */
    --ds-primary: #5856d6;
    --ds-primary-dark: #4240B8;
    --ds-primary-light: rgba(88, 86, 214, 0.1);
    --ds-primary-rgb: 88, 86, 214;

    /* ===== Semantic ===== */
    --ds-success: #34c759;
    --ds-warning: #ff9500;
    --ds-danger: #ff3b30;
    --ds-info: #007aff;

    /* ===== Neutrals ===== */
    --ds-gray-1: #f5f5f7;
    --ds-gray-2: #e8e8ed;
    --ds-gray-3: #d1d1d6;
    --ds-gray-4: #8e8e93;
    --ds-gray-5: #636366;
    --ds-gray-6: #1d1d1f;
    --ds-dark: #1c1c1e;

    --ds-surface: #ffffff;
    --ds-surface-sunken: #f5f7ff;
    --ds-border: rgba(88, 86, 214, 0.08);
    --ds-border-strong: rgba(70, 5, 130, 0.15);

    /* ===== Elevation ===== */
    --ds-shadow-sm: 0 2px 8px rgba(70, 5, 130, 0.1);
    --ds-shadow: 0 4px 16px rgba(28, 28, 30, 0.08);
    --ds-shadow-lg: 0 8px 24px rgba(28, 28, 30, 0.15);

    /* ===== Radii ===== */
    --ds-radius-sm: 8px;
    --ds-radius: 12px;
    --ds-radius-lg: 16px;

    /* ===== Un-prefixed aliases =====
       Older pages were written against these names with their own (blue) values.
       Aliasing rather than deleting keeps those rules working AND drags them onto
       the brand palette, so no page can drift back to a different "primary". */
    --primary: var(--ds-primary);
    --primary-dark: var(--ds-primary-dark);
    --secondary: var(--ds-gray-4);
    --success: var(--ds-success);
    --info: var(--ds-info);
    --warning: var(--ds-warning);
    --danger: var(--ds-danger);
    --light: var(--ds-gray-1);
    --dark: var(--ds-dark);

    /* ===== Bootstrap bridge =====
       Bootstrap 5.3 reads these for links, focus rings, .text-primary,
       .bg-primary and the table/list "active" states. */
    --bs-primary: var(--ds-primary);
    --bs-primary-rgb: var(--ds-primary-rgb);
    --bs-link-color: var(--ds-primary);
    --bs-link-color-rgb: var(--ds-primary-rgb);
    --bs-link-hover-color: var(--ds-primary-dark);
    --bs-link-hover-color-rgb: 66, 64, 184;
    --bs-border-radius: var(--ds-radius-sm);
}

/* ===== Bootstrap buttons =====
   .btn-primary hard-codes #0d6efd through per-component --bs-btn-* variables, so
   setting --bs-primary alone leaves it blue. Re-point the button variables instead —
   this reaches every .btn-primary in the app without touching a template. */
.btn-primary {
    --bs-btn-bg: var(--ds-primary);
    --bs-btn-border-color: var(--ds-primary);
    --bs-btn-hover-bg: var(--ds-primary-dark);
    --bs-btn-hover-border-color: var(--ds-primary-dark);
    --bs-btn-active-bg: var(--ds-primary-dark);
    --bs-btn-active-border-color: var(--ds-primary-dark);
    --bs-btn-disabled-bg: var(--ds-primary);
    --bs-btn-disabled-border-color: var(--ds-primary);
    --bs-btn-focus-shadow-rgb: var(--ds-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ds-primary);
    --bs-btn-border-color: var(--ds-primary);
    --bs-btn-hover-bg: var(--ds-primary);
    --bs-btn-hover-border-color: var(--ds-primary);
    --bs-btn-active-bg: var(--ds-primary);
    --bs-btn-active-border-color: var(--ds-primary);
    --bs-btn-disabled-color: var(--ds-primary);
    --bs-btn-disabled-border-color: var(--ds-primary);
    --bs-btn-focus-shadow-rgb: var(--ds-primary-rgb);
}

/* Focus rings on inputs follow the same accent as the buttons. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--ds-primary-rgb), 0.2);
}

.form-check-input:checked {
    background-color: var(--ds-primary);
    border-color: var(--ds-primary);
}
