/* ==========================================================================
   Clarifolio base styles — fonts, element defaults, and the Bootstrap 5.3
   theme mapping. Loaded right after tokens.css on every page of all three
   sites (Landing has no Bootstrap; the --bs-* mapping is inert there).
   Reads semantic tokens only — no raw colors, borders, radii or shadows.
   ========================================================================== */

/* ---- Self-hosted variable fonts (latin subset) --------------------------- */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-variable-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-variable-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-variable-latin.woff2') format('woff2');
}

/* ---- Bootstrap 5.3 theme mapping ------------------------------------------
   Bootstrap is loaded precompiled from cdnjs, so its Sass variables are out of
   reach — but 5.3 reads nearly everything from these runtime custom
   properties. Mapping them here (instead of overriding individual classes) is
   what keeps Bootstrap's own components on-token in both modes. */
:root {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--fg);
    --bs-body-font-family: var(--font-body);
    --bs-emphasis-color: var(--fg);
    --bs-secondary-color: var(--fg-muted);
    --bs-tertiary-color: var(--fg-muted);
    --bs-secondary-bg: var(--surface);
    --bs-tertiary-bg: var(--bg);
    --bs-heading-color: var(--fg);
    --bs-link-color: var(--fg);
    --bs-link-hover-color: var(--fg);
    --bs-code-color: var(--fg);
    --bs-highlight-bg: var(--accent);
    --bs-highlight-color: var(--accent-ink);

    --bs-border-color: var(--border-color);
    --bs-border-color-translucent: var(--divider-color);
    --bs-border-width: var(--border-width-subtle);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
    --bs-border-radius-xl: var(--radius);
    --bs-border-radius-pill: var(--radius-pill);
    --bs-box-shadow: var(--shadow);
    --bs-box-shadow-sm: var(--shadow-small);
    --bs-box-shadow-lg: var(--shadow);
    --bs-focus-ring-color: var(--focus-color);

    --bs-success-text-emphasis: var(--positive);
    --bs-success-bg-subtle: var(--positive-soft);
    --bs-success-border-subtle: var(--positive);
    --bs-danger-text-emphasis: var(--negative);
    --bs-danger-bg-subtle: var(--negative-soft);
    --bs-danger-border-subtle: var(--negative);
    --bs-warning-text-emphasis: var(--warning);
    --bs-warning-bg-subtle: var(--warning-soft);
    --bs-warning-border-subtle: var(--warning);
    --bs-info-text-emphasis: var(--fg);
    --bs-info-bg-subtle: var(--fg-soft);
    --bs-info-border-subtle: var(--border-color);
    --bs-primary-text-emphasis: var(--fg);
    --bs-primary-bg-subtle: var(--fg-soft);
    --bs-primary-border-subtle: var(--border-color);
    --bs-secondary-text-emphasis: var(--fg-muted);
    --bs-secondary-bg-subtle: var(--fg-soft);
    --bs-secondary-border-subtle: var(--border-color);
}

/* Bootstrap's color utilities resolve rgba(var(--bs-*-rgb)) — bare numeric
   triplets that can't be derived from a hex custom property. Rather than
   restating every token as a triplet (the old, hand-synced approach), point
   the utilities at the semantic tokens directly. */
.text-success { color: var(--positive) !important; }
.text-danger { color: var(--negative) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary, .text-info, .text-dark, .text-body, .text-body-emphasis { color: var(--fg) !important; }
.text-muted, .text-secondary, .text-body-secondary, .form-text { color: var(--fg-muted) !important; }
.bg-success { background-color: var(--positive) !important; color: var(--positive-ink) !important; }
.bg-danger { background-color: var(--negative) !important; color: var(--negative-ink) !important; }
.bg-warning { background-color: var(--warning-soft) !important; }
.bg-primary, .bg-dark, .bg-info { background-color: var(--highlight-bg) !important; color: var(--highlight-fg) !important; }
.border-success { border-color: var(--positive) !important; }
.border-danger { border-color: var(--negative) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-primary, .border-dark { border-color: var(--border-color) !important; }
.bg-white, .bg-body { background-color: var(--surface) !important; }
.bg-light, .bg-body-tertiary { background-color: var(--bg) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border-color) !important; }

/* ---- Element defaults ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    color: var(--fg);
    line-height: 1.08;
}

a { color: var(--fg); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--fg); }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
    outline: var(--border-width) solid var(--focus-color);
    outline-offset: 2px;
}

hr { border: 0; border-top: var(--divider); opacity: 1; }

/* Figures: balances, prices, quantities, percentages. Tabular mono so columns
   of numbers line up digit for digit. */
.num, .figure, [data-figure] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: -0.01em;
}

/* ---- Utilities (available on Landing too, which has no Bootstrap) --------- */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.inset { background: var(--bg); border-radius: var(--radius-sm); }

/* ---- Motion ---------------------------------------------------------------
   Interactive elements "press" toward their offset shadow; components opt in
   with .press (see components.css). Everything stays functional with motion
   reduced — the state change just happens without the travel. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Theme switcher (Views/Shared/_ThemeSwitcher.cshtml) ------------------ */
.theme-switcher {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface);
}

.theme-switcher input { position: absolute; opacity: 0; pointer-events: none; }

.theme-switcher label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: .82rem;
    font-weight: 600;
    color: var(--fg);
    cursor: pointer;
    user-select: none;
}

.theme-switcher label svg { width: 16px; height: 16px; flex-shrink: 0; }
.theme-switcher input:checked + label { background: var(--highlight-bg); color: var(--highlight-fg); }
.theme-switcher input:focus-visible + label { outline: var(--border-width-subtle) solid var(--focus-color); outline-offset: 1px; }

.theme-switcher-compact label { padding: 6px 8px; }
.theme-switcher-compact label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.theme-switcher-status { font-size: .8rem; color: var(--fg-muted); margin-left: var(--space-2); }

/* ---- Accent picker (Views/Shared/_AccentPicker.cshtml) -------------------- */
.accent-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.accent-picker input { position: absolute; opacity: 0; pointer-events: none; }
.accent-picker label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    font-size: .85rem;
    font-weight: 600;
    color: var(--fg);
    border: var(--border-width-subtle) solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    user-select: none;
}
.accent-picker label:hover { border-color: var(--border-color); }
.accent-picker-swatch { width: 1.6rem; height: 1.6rem; border: var(--border-subtle); border-radius: var(--radius-pill); }
.accent-picker input:checked + label { border-color: var(--border-color); background: var(--surface); box-shadow: var(--shadow-small); }
.accent-picker input:checked + label .accent-picker-swatch { outline: var(--border-width-subtle) solid var(--fg); outline-offset: 2px; }
.accent-picker input:focus-visible + label { outline: var(--border-width-subtle) solid var(--focus-color); outline-offset: 2px; }

/* ---- Floating accent switcher (always on Landing; Development-only elsewhere) */
.accent-switcher {
    position: fixed;
    left: var(--space-3);
    bottom: var(--space-3);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    color: var(--fg);
    border: var(--border-subtle);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-small);
    font: 600 .7rem/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.accent-switcher button {
    width: 18px;
    height: 18px;
    padding: 0;
    border: var(--border-subtle);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.accent-switcher button[aria-pressed="true"] { outline: var(--border-width-subtle) solid var(--fg); outline-offset: 2px; }