/*
 * Campaign design tokens — type scale, spacing, measure.
 *
 * DESIGN-03, 7 Oct 2026.
 *
 * Why this file exists. A count of the campaign stylesheets found **47
 * distinct font sizes**, eleven of them inside a single 0.14rem band:
 * 0.74, 0.75, 0.76, 0.78, 0.8, 0.82, 0.84, 0.85, 0.86, 0.875, 0.88. No
 * reader can tell those apart and no designer chose them. That is not a
 * style, it is the absence of one, and it is the clearest reason the pages
 * read as assembled rather than designed.
 *
 * Nine steps replace them. The ratio is 1.25 above the body size, which is
 * wide enough that two adjacent steps are visibly different — the whole
 * point of a scale — and the four small steps below it are spaced for UI
 * labels rather than prose.
 *
 * The floors are the ones set during the responsive audit and measured on
 * a phone: 0.75rem for uppercase tracked labels, 0.875rem for anything in
 * sentence case. Nothing in this scale goes below them.
 *
 * Spacing is a 4px rhythm. Same argument: arbitrary padding is why
 * vertical spacing on these pages never settles into a rhythm.
 */

:root {
    /* Type. One step per visible difference. */
    --t-xs: 0.75rem;      /* 12px — uppercase tracked labels only */
    --t-sm: 0.8125rem;    /* 13px — dense UI, captions */
    --t-base: 0.875rem;   /* 14px — interface body */
    --t-md: 1rem;         /* 16px — prose body */
    --t-lg: 1.125rem;     /* 18px — lede */
    --t-xl: 1.375rem;     /* 22px — section heading */
    --t-2xl: 1.75rem;     /* 28px — page heading, small */
    --t-3xl: 2.25rem;     /* 36px — page heading */
    --t-4xl: 3rem;        /* 48px — display */

    /* Line height. 1.6 for prose, tighter as type grows — a 48px heading
       set at 1.6 looks like a list, not a heading. */
    --lh-tight: 1.1;
    --lh-heading: 1.25;
    --lh-ui: 1.45;
    --lh-prose: 1.65;

    /* Spacing, 4px rhythm. */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;

    /*
     * The measure, in `ch` rather than `rem`.
     *
     * A rem cap cannot hold a character count: the same 46rem renders
     * about 80 characters at 16px and 103 at 13px. I set it in rem first
     * and measured the result in a browser — 95 to 103 characters, barely
     * better than the 104 to 123 it was meant to fix. `ch` is relative to
     * the element's own font size, so one token holds across the scale.
     *
     * The value is calibrated, not assumed: 62ch measures 70 to 73 real
     * characters in Inter, which is the middle of the 65–75 range.
     */
    --measure: 62ch;
    --measure-narrow: 46ch;

    /* The page gutter, so every stylesheet insets by the same amount. */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);

    /*
     * Radius as a signal, not a skin.
     *
     * The campaign used eight distinct values — 12, 8, 6, 2, 16, 20, 999px
     * and 50% — and not one of them meant anything: the same 12px sat on a
     * chart panel, a KPI, a template card and a select. Three values that
     * each mean something are worth more than eight that do not.
     *
     * A reader learns this in about four seconds and never has to be told:
     * rounded things can be pressed.
     */
    --r-control: 8px;   /* you can press this */
    --r-none: 0;        /* this is content; read it */
    --r-round: 50%;     /* a dot, a marker, an avatar */
    --r-paper: 2px;     /* the letter preview. Paper has soft corners. */

    /*
     * A citation rule. Under a figure it means "the source follows", and
     * it means nothing else anywhere — a hairline that separates nothing
     * is decoration, and comes out.
     */
    --rule: 1px solid rgba(255, 255, 255, 0.16);
    --rule-accent: 1px solid rgba(52, 211, 153, 0.45);
}