/*
 * Niklaus Gerber design tokens, v2.1 (2026-11-12)
 * One file for the website, slides, and anything else that should look like niklausgerber.com.
 * The same values as the live stylesheet (site/assets/css/site.css); scripts/check.sh compares them.
 *
 * Rules: one accent (indigo). No gradients. Neutrals only besides indigo.
 * Dark follows prefers-color-scheme; [data-theme="light|dark"] forces a mode on any element.
 * tokens.json carries the same values. Change both together (see README, "Changing a token").
 */

/* ------------------------------------------------------------------ fonts */
/* The site self-hosts subset files (see catalogue/foundations/type.html). Other projects can use Google Fonts:
   https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..500&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400&display=swap */

/* Metric-matched fallbacks, so the swap to the web font moves nothing. */
@font-face {
    font-family: "Instrument Sans Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Roboto");
    size-adjust: 102.83%; ascent-override: 94.33%; descent-override: 24.31%; line-gap-override: 0%;
}
@font-face {
    font-family: "Newsreader Fallback";
    src: local("Georgia"), local("Noto Serif");
    size-adjust: 93.37%; ascent-override: 78.72%; descent-override: 28.38%; line-gap-override: 0%;
}

:root {
    color-scheme: light dark;

    /* ---- colour: light */
    --canvas: #f5f3ef;          /* page and slide background */
    --ink: #141414;             /* text, rules. 16.6:1 on canvas */
    --ink-2: #5a564f;           /* secondary text, labels. 6.6:1 */
    --ghost: #8c877e;           /* display text 48px+ only (second line of a ghost headline). 3.2:1 */
    --hair: #e0ddd8;            /* hairline dividers between rows */
    --tile: #f5f3ef;            /* index tile ground */

    /* ---- colour: the one accent */
    --accent: #26357a;          /* indigo. Links, UI, bands. 10.1:1 on canvas */
    --link: #26357a;
    --band: #26357a;            /* content-page header band; stays indigo in dark mode */
    --on-accent: #f7f6ff;       /* text on indigo. 10.5:1 */
    --on-accent-link: #aab4f0;  /* links and secondary text on indigo. 5.6:1 */
    --on-accent-ghost: #7f8bcb; /* display text 48px+ on indigo only. 3.4:1 */
    --mark: #26357a;            /* state markers: rail, filters, current step */
    --night: #0a0a0b;           /* 404 and Blackhole only */

    /* ---- components */
    --btn-bg: #26357a;
    --btn-fg: #f7f6ff;
    --btn-hover: #141414;
    --photo: none;              /* filter on photos; dims them in dark mode */

    /* ---- type */
    --font-ui: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;  /* display, headings, labels, all chrome */
    --font-read: "Newsreader", "Newsreader Fallback", Georgia, serif;                 /* reading text and quotes, never in navigation */
    --weight-regular: 400;
    --weight-medium: 500;       /* the heaviest weight on the site */
    --track-display: -0.022em;  /* never tighter than -0.025em */

    /* ---- space (14 steps) */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
    --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-28: 112px; --s-36: 144px; --s-50: 200px;

    /* ---- layout (desktop values; tablet and phone in catalogue/foundations/space-layout.html) */
    --column: 1060px;           /* centred content width on desktop (190px margins at 1440) */
    --content-col: 700px;       /* reading column */
    --measure: 640px;           /* max line length of a paragraph; articles 700 on desktop */
    --rule-strong: 5px;         /* name rule and tile rule; 4px on phone */
    --rule-group: 5px;          /* top rule of a numbered group (steps, parts, offers); 4px on phone and tablet */
    --rule: 1px;

    /* ---- motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --t-fast: 150ms;            /* colour steps: links, tiles, buttons */
    --t-base: 250ms;            /* rail marker */
    --t-zoom: 360ms;            /* page transitions */
    --t-slow: 400ms;            /* the ceiling for interface motion (exceptions: the agent figure scan, 1.4s, and the 404 rings) */
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #121212; --ink: #ecebe7; --ink-2: #a8a399; --ghost: #6b675f; --hair: #33312e; --tile: #1e1e1c;
        --link: #aab4f0; --mark: #aab4f0;
        --btn-bg: #aab4f0; --btn-fg: #121212; --btn-hover: #ecebe7;
        --photo: brightness(0.88);
    }
}
[data-theme="light"] {
    --canvas: #f5f3ef; --ink: #141414; --ink-2: #5a564f; --ghost: #8c877e; --hair: #e0ddd8; --tile: #f5f3ef;
    --link: #26357a; --mark: #26357a; --btn-bg: #26357a; --btn-fg: #f7f6ff; --btn-hover: #141414; --photo: none;
}
[data-theme="dark"] {
    --canvas: #121212; --ink: #ecebe7; --ink-2: #a8a399; --ghost: #6b675f; --hair: #33312e; --tile: #1e1e1c;
    --link: #aab4f0; --mark: #aab4f0; --btn-bg: #aab4f0; --btn-fg: #121212; --btn-hover: #ecebe7; --photo: brightness(0.88);
}
@media (prefers-contrast: more) {
    :root { --ink-2: var(--ink); --hair: var(--ink); --ghost: var(--ink-2); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------- portable base classes */
/* For projects that do not load the site's stylesheet. Prefixed t- so they never collide with site.css
   (which has its own .display, .lede and a .read column). Phone values first; .page is a CSS container. */
body { background: var(--canvas); color: var(--ink); font-family: var(--font-ui); font-size: 17px; line-height: 26px; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--t-fast) linear; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

.t-display { font-size: 40px; line-height: 44px; letter-spacing: -0.018em; font-weight: 500; text-wrap: balance; }
.t-lede    { font-family: var(--font-read); font-size: 20px; line-height: 30px; max-width: var(--measure); text-wrap: pretty; }
.t-read    { font-family: var(--font-read); font-size: 18px; line-height: 30px; max-width: var(--measure); text-wrap: pretty; }
.t-label   { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.t-rule-5  { height: 4px; background: var(--ink); }
.t-rule-1  { height: 1px; background: var(--ink); }
@container page (min-width: 768px) {
    .t-display { font-size: 56px; line-height: 60px; letter-spacing: -0.02em; }
    .t-lede { font-size: 22px; line-height: 32px; }
    .t-read { font-size: 20px; line-height: 32px; }
    .t-rule-5 { height: 5px; }
}
@container page (min-width: 1024px) {
    .t-display { font-size: 72px; line-height: 76px; letter-spacing: var(--track-display); }
    .t-lede { font-size: 24px; line-height: 36px; }
    .t-read { font-size: 21px; line-height: 34px; }
}