/* ==========================================================================
   Vantage Point, shared site base  (/assets/site.css)

   Created 2026-08-22 by the readability pass. This is the ONE copy of the
   design tokens and the few text rules every page shares. Each page keeps
   its own inline <style> for page-specific components and links this file
   BEFORE that block, so an inline rule wins on any conflict.

   Brief (the constitution this file implements): docs/2026-08-22-readability-brief.md
   Consistency proof: python scripts/check_site_base.py  (also run by pytest)
   Cache: the pages link this file as /assets/site.css?v=YYYYMMDD. Bump the
   query string on every page whenever this file changes.
   ========================================================================== */

:root {
    /* Surfaces (unchanged) */
    --bg-deep: #06060E;
    --bg-primary: #0D0D1A;
    --bg-card: #111122;
    --bg-card-hover: #161630;

    /* Text ladder. Ratios are the minimum on --bg-card-hover, the lightest
       surface a sentence sits on; every other surface is darker and scores
       higher. Raised 2026-08-22: dim was #9994B0 (6.1:1), faint was #5A5672
       (2.5:1, failed AA everywhere). */
    --white: #F2F0EB;        /* 15.5:1 */
    --white-dim: #A7A2BA;    /*  7.2:1 */
    --white-faint: #8D88A2;  /*  5.2:1 */

    /* Gold, one accent. gold-dim raised from #8A7233 (3.8:1). */
    --gold: #C9A84C;         /*  7.7:1 */
    --gold-light: #E0C872;   /* 10.7:1 */
    --gold-dim: #A98F48;     /*  5.6:1 */

    /* Data colours */
    --success: #22C55E;
    --error: #EF4444;

    /* Lines and the 2026-07-02 elevation layer */
    --border-subtle: #1f1f2e;
    --border-hover: #2a2a3d;
    --accent-blue: #1E40AF;
    --accent-blue-hover: #2563EB;

    /* Links */
    --link: var(--gold);
    --link-hover: var(--gold-light);

    /* Type */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --text-xs: 0.8125rem;   /* 13px, the floor: badges, tracked labels, metadata */
    --text-sm: 0.875rem;    /* 14px: control labels, captions, table cells */
    --text-base: 1rem;      /* 16px: sentences */
    --text-md: 1.0625rem;   /* 17px: tool explanations and result subtext */
    --text-lg: 1.125rem;    /* 18px: ledes */
    --text-xl: 1.25rem;     /* 20px: compact headings */
    --lh-body: 1.65;
    --lh-caption: 1.5;
    --lh-tight: 1.15;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--white);
    background: var(--bg-deep);
    -webkit-font-smoothing: antialiased;
}

/* Content links: gold with a visible underline, so colour is never the only
   cue. Scoped to classless anchors inside text; navigation, cards and
   buttons style their own anchors. */
p a:not([class]), li a:not([class]), dd a:not([class]), td a:not([class]),
th a:not([class]), figcaption a:not([class]), small a:not([class]),
summary a:not([class]), .prose a:not([class]) {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(201, 168, 76, 0.45);
    text-underline-offset: 0.18em;
    transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}
p a:not([class]):hover, li a:not([class]):hover, dd a:not([class]):hover,
td a:not([class]):hover, th a:not([class]):hover, figcaption a:not([class]):hover,
small a:not([class]):hover, summary a:not([class]):hover, .prose a:not([class]):hover {
    color: var(--link-hover);
    text-decoration-color: currentColor;
}

/* Keyboard focus: one visible ring everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Placeholder text reads at the faint token, never browser-default grey */
::placeholder {
    color: var(--white-faint);
    opacity: 1;
}