/*
 * The brand's design tokens (knowledge/brand.md, phase5_plan.md FS9). Every colour, type
 * style, space and corner in the site's CSS comes from here; Track X (the admin) reuses it.
 *
 * Breakpoints (custom properties can't be used in media queries, so they are written out):
 *   phone   below 48rem (768 px): the brand's phone type sizes
 *   tablet  48rem (768 px) and up: the desktop type sizes
 *   desktop 64rem (1024 px) and up
 */

@layer tokens, base, layout, components, pages;

@layer tokens {
    :root {
        /* Colours, named by job. Light only: no dark mode (BR4). */
        --color-bg: #ffffff;
        --color-ink: #111111;
        --color-ink-muted: #55555a;
        --color-rule: #d6d6d6;
        --color-image-ground: #e3e3e3;
        --color-purple: #4b2e7a;
        --color-purple-deep: #2a1a45;
        --color-lavender: #ece6f3;
        --color-acid: #c9f03a;
        --color-tip: #e4f5b0;
        --color-warning: #ffd9a8;
        --color-success: #2f6b1e;
        --color-error: #b3261e;
        --color-error-bg: #fce8e6;

        /* Families. The fallbacks keep the layout close while the web fonts load. */
        --font-body: "Barlow", system-ui, sans-serif;
        --font-display: "Barlow Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
        --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

        /* The 12 type styles: phone sizes here, desktop sizes in the media query below. */
        --text-logo-height: 32px;
        --text-lead-size: 38px;
        --text-lead-leading: 0.98;
        --text-title-size: 24px;
        --text-list-size: 22px;
        --text-section-size: 22px;
        --text-section-tracking: 0.02em;
        --text-tag-size: 13px;
        --text-tag-tracking: 0.06em;
        --text-button-size: 19px;
        --text-wisecrack-size: 18px;
        --text-body-size: 17px;
        --text-body-leading: 1.55;
        --text-small-size: 14px;
        --text-prompt-size: 14px;
        --text-prompt-leading: 1.65;
        --text-timestamp-size: 12px;
        --text-heading-leading: 1.1;

        /* Spacing, in steps of 4 px. */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 24px;
        --space-6: 32px;
        --space-7: 48px;
        --space-8: 64px;

        /* Layout: the page's widest line, the side gutters, and one column of reading text. */
        --layout-max: 76rem;
        --layout-gutter: 16px;
        --measure: 44rem;

        /* Corners: images, panels and callouts, tags and buttons. Nothing rounder. */
        --radius-image: 8px;
        --radius-panel: 10px;
        --radius-pill: 999px;

        /* Rules: the heavy purple one under the header and section titles, hairlines between items. */
        --rule-heavy: 4px solid var(--color-purple);
        --rule-hairline: 1px solid var(--color-rule);

        /* Focus ring: purple on light grounds; components on deep purple set --focus-color to acid. */
        --focus-color: var(--color-purple);
        --focus-width: 3px;
        --focus-offset: 2px;
        /* Room a scrolling row keeps inside its edges, so the ring isn't cut off (5.9). */
        --focus-room: calc(var(--focus-width) + var(--focus-offset));
    }

    @media (min-width: 48rem) {
        :root {
            --text-logo-height: 46px;
            --text-lead-size: 58px;
            --text-title-size: 26px;
            --text-list-size: 24px;
            --text-section-size: 32px;
            --text-tag-size: 14px;
            --text-wisecrack-size: 21px;
            --text-body-size: 18px;
            --layout-gutter: 24px;
        }
    }

    @media (min-width: 64rem) {
        :root {
            --layout-gutter: 32px;
        }
    }
}