/* 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 =====
       The brand purple (#460582, same as --ds-brand-start). Every primary button in
       the app resolves here -- it replaced the earlier #5856d6 indigo, which read as
       blue. Pages must not hard-code a blue for a button; use var(--ds-primary). */
    --ds-primary: #460582;
    --ds-primary-dark: #350465;
    --ds-primary-light: rgba(70, 5, 130, 0.1);
    --ds-primary-rgb: 70, 5, 130;
    /* Hover / pressed state of every primary button: a lighter indigo, so the
       button visibly answers the pointer instead of just going darker. */
    --ds-primary-hover: #5856d6;
    --ds-primary-hover-rgb: 88, 86, 214;

    /* ===== Green action colour =====
       Every green button in the app (.btn-success, confirm / adopt / agree / send /
       download / activate). Hover goes one step darker so the button visibly answers
       the pointer. Status badges use the same green through --ds-success below. */
    --ds-green: #47C87C;
    --ds-green-hover: #38B06A;
    --ds-green-rgb: 71, 200, 124;

    /* ===== Semantic ===== */
    /* Status green (badges, "completed" chips and icons, Bootstrap .bg/.text/.border-success)
       -- the same #47C87C as the green buttons. --ds-success-text is a darker shade of it for
       TEXT sitting on a green tint: #47C87C itself is ~2:1 against a light background. */
    --ds-success: var(--ds-green);
    --ds-success-rgb: var(--ds-green-rgb);
    --ds-success-text: #24874E;
    /* Warning (user-chosen, 2026-09-25): solid #D98200 carries white text; the light
       #FFEED5 is the tint behind warning badges / pills, whose label is #D98200.
       --ds-warning-text is a darker shade for running TEXT on the tint (alert bodies) —
       #D98200 on #FFEED5 is fine for a short bold label but ~2.6:1 for a sentence.
       --ds-warning-hover is the one-step-darker hover for a solid warning button. */
    --ds-warning: #D98200;
    --ds-warning-rgb: 217, 130, 0;
    --ds-warning-light: #FFEED5;
    --ds-warning-border: #F5D3A1;
    --ds-warning-text: #8F5600;
    --ds-warning-hover: #BF7200;
    --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: 53, 4, 101;
    --bs-border-radius: var(--ds-radius-sm);

    --bs-success: var(--ds-success);
    --bs-success-rgb: var(--ds-success-rgb);
    --bs-success-text-emphasis: var(--ds-success-text);
    --bs-success-bg-subtle: #e3f6eb;
    --bs-success-border-subtle: #b5e9ca;

    /* .text-warning, .bg-warning, .border-warning and .alert-warning follow the warning palette. */
    --bs-warning: var(--ds-warning);
    --bs-warning-rgb: var(--ds-warning-rgb);
    --bs-warning-text-emphasis: var(--ds-warning-text);
    --bs-warning-bg-subtle: var(--ds-warning-light);
    --bs-warning-border-subtle: var(--ds-warning-border);
}

/* A warning BADGE is the light pill: #FFEED5 behind a #D98200 label. It beats the
   `text-dark` most templates pair with bg-warning (Bootstrap marks that !important). */
.badge.bg-warning,
.badge.text-bg-warning {
    background-color: var(--ds-warning-light) !important;
    color: var(--ds-warning) !important;
}

/* A solid warning surface that is not a badge carries white text. */
.text-bg-warning {
    background-color: var(--ds-warning) !important;
    color: #fff !important;
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ds-warning);
    --bs-btn-border-color: var(--ds-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ds-warning-hover);
    --bs-btn-hover-border-color: var(--ds-warning-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ds-warning-hover);
    --bs-btn-active-border-color: var(--ds-warning-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ds-warning);
    --bs-btn-disabled-border-color: var(--ds-warning);
    --bs-btn-focus-shadow-rgb: var(--ds-warning-rgb);
}

/* ===== 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-hover);
    --bs-btn-hover-border-color: var(--ds-primary-hover);
    --bs-btn-active-bg: var(--ds-primary-hover);
    --bs-btn-active-border-color: var(--ds-primary-hover);
    --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-hover);
    --bs-btn-hover-border-color: var(--ds-primary-hover);
    --bs-btn-active-bg: var(--ds-primary-hover);
    --bs-btn-active-border-color: var(--ds-primary-hover);
    --bs-btn-disabled-color: var(--ds-primary);
    --bs-btn-disabled-border-color: var(--ds-primary);
    --bs-btn-focus-shadow-rgb: var(--ds-primary-rgb);
}

.btn-success {
    --bs-btn-bg: var(--ds-green);
    --bs-btn-border-color: var(--ds-green);
    --bs-btn-hover-bg: var(--ds-green-hover);
    --bs-btn-hover-border-color: var(--ds-green-hover);
    --bs-btn-active-bg: var(--ds-green-hover);
    --bs-btn-active-border-color: var(--ds-green-hover);
    --bs-btn-disabled-bg: var(--ds-green);
    --bs-btn-disabled-border-color: var(--ds-green);
    --bs-btn-focus-shadow-rgb: var(--ds-green-rgb);
}

.btn-outline-success {
    --bs-btn-color: var(--ds-green);
    --bs-btn-border-color: var(--ds-green);
    --bs-btn-hover-bg: var(--ds-green-hover);
    --bs-btn-hover-border-color: var(--ds-green-hover);
    --bs-btn-active-bg: var(--ds-green-hover);
    --bs-btn-active-border-color: var(--ds-green-hover);
    --bs-btn-disabled-color: var(--ds-green);
    --bs-btn-disabled-border-color: var(--ds-green);
    --bs-btn-focus-shadow-rgb: var(--ds-green-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);
}