/* ==========================================================================
   Token contract + Bootstrap bridge.

   THE RULE: no colour literal may appear in any stylesheet except
   assets/css/themes/*.css. Everything else references var(--token).
   `composer lint:css` enforces it.

   A theme file must define every token listed below. Nothing here carries a
   value of its own — this file only wires the tokens into Bootstrap 5.3 and
   sets the page defaults, so a theme swap needs no other change.

     surfaces   --paper --paper-2 --surface --surface-solid --surface-raised
                --page-backdrop --paper-glass
     text       --ink --graphite --quiet
     lines      --hair --hair-strong --shadow --focus
     accent     --accent --accent-strong --accent-soft
     status     --pass --pass-bg --pass-hair
                --fail --fail-bg --fail-hair
                --warn --warn-bg --warn-hair
                --caution --caution-bg --caution-hair
                --info --info-bg --info-hair
     inverted   --ink-surface --ink-surface-text --ink-surface-quiet
                --ink-surface-hair
     charts     --chart-pass --chart-warn --chart-fail --chart-grid --chart-axis
                --chart-series-1 … --chart-series-6 --chart-series-other
     type       --font-display --font-body --font-mono
                --step-hero --step-h1 --step-h2
                --text-2xs --text-xs --text-sm --text-md --text-base --text-lg
                (11 / 12 / 13 / 14 / 16 / 20px)
     shape      --radius --radius-sm

   Charts get their own tokens because a bar fill and a text colour that read
   as "the same green" are never the same value: the fill covers a large area
   at full saturation, the text is 13px on paper. Reusing --pass for both is
   what makes dashboards look muddy.

   Chart tokens (and --ink, --graphite, --hair-strong, --surface-solid, which
   the dashboard charts also read) must be plain colour values — hex or
   rgb()/rgba(). Chart.js draws on a canvas and reads them through
   getComputedStyle; a canvas cannot parse color-mix() or another var().
   ========================================================================== */

/* --- Bootstrap 5.3 reads these; mapping them re-themes every component,
       including the 55 `.text-secondary` already in the views. ------------- */
:root {
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font-body);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--graphite);
    --bs-tertiary-color: var(--quiet);
    --bs-border-color: var(--hair);
    --bs-border-color-translucent: var(--hair);

    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-strong);

    --bs-primary: var(--accent);
    --bs-success: var(--pass);
    --bs-danger: var(--fail);
    --bs-warning: var(--warn);

    --bs-code-color: var(--accent-strong);
    --bs-focus-ring-color: var(--focus);
    --bs-font-monospace: var(--font-mono);

}

/* --- page defaults ---------------------------------------------------- */
html,
body {
    min-height: 100%;
}

html {
    overflow-y: auto;
    scrollbar-gutter: stable;
    background-color: var(--paper);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    background: var(--page-backdrop);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: var(--font-body);
}

main {
    flex: 1 0 auto;
    min-height: 100%;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* Technical data — IPs, DNS records, report ids, selectors — is mono.
   Domain names are read as words and stay in the body font. */
code,
kbd,
samp,
pre,
.mono {
    font-family: var(--font-mono);
}