/* Calibre Code USA — design tokens.
   Single source of truth for brand colour, radii and shadow.

   Loaded in partials/head.ejs AFTER Bootstrap and BEFORE style.css, so the
   Bootstrap overrides below win and style.css can consume the tokens.

   Every colour here carries its measured contrast ratio. Ratios were computed
   against the surfaces the value actually lands on, not assumed. Do not change
   a value without re-measuring - scripts/verify-ui-baseline.js enforces it. */

:root {
    /* Brand */
    --cc-brand: #1363C6;          /* 4.97:1 on #e9eef7, 5.79:1 on #fff */
    --cc-brand-hover: #0F4F9E;    /* 6.85:1 on #e9eef7, 7.98:1 on #fff */
    --cc-signal: #15ACE1;
    --cc-ink: #14183E;
    --cc-hero-deep: #09142B;
    --cc-hero-mid: #102B57;
    --cc-paper: #e9eef7;
    --cc-surface: #ffffff;

    /* Link + accent for dark surfaces. #7db6ff measures 7.82:1 on the dark
       panel (#171f33) and 9.04:1 on the dark body (#0a101f). */
    --cc-brand-on-dark: #7db6ff;
    --cc-signal-on-dark: #7ce7ff;

    /* Muted text that still passes at small sizes */
    --cc-muted: #545A78;          /* 5.80:1 on #e9eef7 */
    --cc-muted-soft: #5A6080;     /* 5.27:1 on #e9eef7 */
    --cc-on-brand-soft: #e8f1fd;  /* 5.08:1 on #1363C6 */

    /* Type. Archivo and JetBrains Mono are requested in partials/head.ejs.
       These were previously defined inside .blog-page only, so the rest of the
       site rendered in whatever sans-serif the visitor's OS supplied. */
    --cc-display: "Archivo Black", Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --cc-body: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cc-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Shape */
    --cc-radius-sm: 6px;
    --cc-radius: 10px;
    --cc-radius-lg: 14px;
    --cc-radius-panel: 28px;
    --cc-shadow-panel: 0 24px 70px rgba(20, 24, 62, 0.12);

    /* ---- Bootstrap overrides -------------------------------------------
       Bootstrap 5.3 ships #0d6efd. Measured, that is 3.87:1 on this site's
       page ground and 3.64:1 on the dark panel - both below the 4.5:1 body
       minimum. It was also rendering 72 links and 91 buttons off-brand.
       These five declarations fix every one of them. */
    --bs-primary: #1363C6;
    --bs-primary-rgb: 19, 99, 198;
    --bs-link-color: #1363C6;
    --bs-link-color-rgb: 19, 99, 198;
    --bs-link-hover-color: #0F4F9E;
    --bs-link-hover-color-rgb: 15, 79, 158;
    --bs-border-radius: var(--cc-radius);
}

/* .btn-primary resolves its colours from compiled --bs-btn-* values, not from
   --bs-primary, so it needs its own override. White on #1363C6 is 5.79:1. */
.btn-primary {
    --bs-btn-bg: #1363C6;
    --bs-btn-border-color: #1363C6;
    --bs-btn-hover-bg: #0F4F9E;
    --bs-btn-hover-border-color: #0F4F9E;
    --bs-btn-active-bg: #0F4F9E;
    --bs-btn-active-border-color: #0F4F9E;
    --bs-btn-disabled-bg: #1363C6;
    --bs-btn-disabled-border-color: #1363C6;
}

.text-primary {
    --bs-text-opacity: 1;
    color: #1363C6 !important;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #1363C6 !important;
}

/* Dark theme. theme.css already corrects .btn-outline-primary here and
   documents its ratios; plain links were missed, which is why /terms,
   /corrections and /editorial-standards failed in dark mode only. */
body[data-theme="dark"] {
    --bs-link-color: #7db6ff;
    --bs-link-color-rgb: 125, 182, 255;
    --bs-link-hover-color: #a9d0ff;
    --bs-link-hover-color-rgb: 169, 208, 255;
}

body[data-theme="dark"] .text-primary {
    color: #7db6ff !important;
}