/*
 * gogo-tokens.css - layer 2 of 5 (foundation, TOKENS, theme, components, app).
 *
 * Two tiers (canon K4). The PRIMITIVE block below is the only place in the project where a
 * raw hex value may appear; everything else, in this file and every other layer, references a
 * primitive through a SEMANTIC token. A rebrand changes one primitive.
 *
 * Design direction: docs/features/site.md. Colour since 27 Sep 2026 follows the Grafana style
 * on refero (03e0e30c): one action blue, a grey page with white cards, pastel surfaces per post
 * format, a sunrise wash on the hero, a two-colour wash on the /about heading, Poppins headings.
 * Layout, radius and spacing are the
 * 25 Sep 2026 direction (Sleeve's tokens inside Worksection's layout). Light theme only in v1;
 * dark is declared `roadmap` in brain/design/config.yaml.
 *
 * Contrast record (WCAG 2.x relative luminance, computed, not eyeballed):
 *   Surfaces: canvas L=1.0000, surface L=0.9548. (The grey band, L=0.9041, was retired on
 *     27 Sep 2026 for the sunrise wash; its figures below are kept as the record.)
 *   Text on canvas / surface / band:
 *     ink 21.0 / 20.1 / 19.1, graphite 12.6 / 12.1 / 11.5, slate 10.3 / 9.9 / 9.4.
 *     The 25 Sep accent pair (#0e95ee at 3.21 on canvas, non-text only; #0a6bb5 at 5.55 for
 *     labels and links) was replaced on 27 Sep 2026 by signal blue, recorded below.
 *     smoke 2.85 on canvas: never used for text on a light surface.
 *     red-deep 6.57 / 6.29 / 5.97 (AA for small text; form errors and the error notice).
 *   Colour theme, 27 Sep 2026 (page = cloud #f4f4f6, cards stay white):
 *     signal blue as text: white 5.73, cloud 5.22, mist 5.02, lilac 4.92, peach 4.65 (AA
 *     everywhere it's used). On the hero's sunrise wash it's 3.26 to 3.94, and on the /about
 *     panel wash (lilac to sky) 3.26 to 3.74, so text on either wash is ink or slate (slate
 *     5.87 at the weakest stop), never blue.
 *     white on signal blue 5.73, on signal-blue-deep 8.06 (button text, both AA).
 *     ink on the pastels 17.1 to 18.4, graphite 10.3 to 11.1, red-deep 5.34 to 5.76.
 *     Neighbour luminance against the page: white 9.4%, mist 3.9%, lilac 6.1%, peach 11.4%
 *     (all clear 3%), so the surface change carries a pastel card on its own. The 1px pastel
 *     edges (1.6 to 1.9 against white and cloud, decoration only) were removed on 1 Oct 2026:
 *     designux's beginner-mistakes case drops an outline that separates nothing.
 *     Experience's aqua wash (added 27 Sep 2026 so it no longer matches the subscribe module's
 *     blue mist): signal blue 4.95, slate 8.90 on it; 5.5% from the page.
 *     Footer band (28 Sep 2026): white, 9.4% above the page, with an upward shadow; its text
 *     is the white-surface figures above (slate 10.31, signal blue 5.73). Two greys were tried
 *     first (#ebebef, #efeff2); the owner settled on white.
 *     Focus ring (signal blue) 5.22 on cloud and at least 3.26 on the wash (3:1 required).
 *   Terminal (on --gogo-term-bg):
 *     fg 16.27, green 7.57, amber 7.61, muted 6.25. All pass AA; fg, green and amber pass AAA.
 */

/* ---- PRIMITIVES: the only hex in the project ------------------------------------------- */
:root {
    --gogo-ink: #000000;
    --gogo-graphite: #333333;
    --gogo-slate: #374151;
    --gogo-smoke: #999999;
    --gogo-hairline: #e5e7eb;
    --gogo-surface-grey: #f9fafb;
    --gogo-white: #ffffff;

    /* Colour theme, 27 Sep 2026 (Grafana style on refero 03e0e30c) */
    --gogo-signal-blue: #1b55f5;
    --gogo-signal-blue-deep: #1442c4;
    --gogo-cloud: #f4f4f6;
    --gogo-blue-mist: #eaf0ff;
    --gogo-peach-paper: #f4e5d9;
    --gogo-lilac-wash: #f9e8ff;
    --gogo-aqua-wash: #d8f4f1;
    --gogo-sunrise-1: #f7bfa3;
    --gogo-sunrise-2: #e6b3e6;
    --gogo-sunrise-3: #a3d8f7;
    --gogo-sunrise-4: #7be7e7;

    --gogo-term-black: #0b0f14;
    --gogo-term-bar-black: #161b22;
    --gogo-term-white: #e6edf3;
    --gogo-term-green: #3fb950;
    --gogo-term-amber: #d29922;
    --gogo-term-grey: #8b949e;
    --gogo-term-red: #f85149;
    --gogo-red-deep: #b42318;
    --gogo-green-deep: #1a7340;
}

/* ---- SEMANTIC: what components consume ------------------------------------------------- */
:root {
    /* Colour roles */
    --gogo-text-strong: var(--gogo-ink);
    --gogo-text: var(--gogo-graphite);
    --gogo-text-muted: var(--gogo-slate);
    --gogo-border: var(--gogo-hairline);
    --gogo-border-control: var(--gogo-slate);
    --gogo-page: var(--gogo-cloud);
    --gogo-footer-bg: var(--gogo-white);
    --gogo-canvas: var(--gogo-white);
    --gogo-surface: var(--gogo-surface-grey);
    --gogo-hero-wash: linear-gradient(120deg, var(--gogo-sunrise-1) 10%, var(--gogo-sunrise-2) 40%, var(--gogo-sunrise-3) 75%, var(--gogo-sunrise-4));
    /* Laid over the hero wash so its last 200px melt into the page instead of ending in a hard
       line behind the terminal card. Text on the wash sits above the fade. */
    --gogo-hero-fade: linear-gradient(to bottom, transparent calc(100% - 200px), var(--gogo-page));
    /* How far the same wash reaches down every inner page: the page head, then the fade. Two
       thirds of home's 675px band at 1440, so an inner page opens like home but reads as
       secondary (owner, 1 Oct 2026; it replaced the rounded two-colour panel, then ran 640px). */
    --gogo-page-wash-height: 450px;
    --gogo-on-wash-label: var(--gogo-ink);
    /* Blue means "you can act here": buttons, links, the focus ring and the current nav item.
       Labels, icons and chips stay off it, so it keeps meaning that (owner, 1 Oct 2026). */
    --gogo-accent: var(--gogo-signal-blue);
    --gogo-accent-text: var(--gogo-signal-blue);
    --gogo-label-text: var(--gogo-slate);
    --gogo-link: var(--gogo-signal-blue);
    --gogo-link-hover: var(--gogo-ink);
    --gogo-button-primary-bg: var(--gogo-signal-blue);
    --gogo-button-primary-bg-hover: var(--gogo-signal-blue-deep);
    --gogo-button-primary-fg: var(--gogo-white);
    --gogo-focus-ring: var(--gogo-signal-blue);

    /* Tones: the four pastel surfaces, no edges. Text on them stays ink, graphite or the action
       blue, all AA (record above). */
    --gogo-tone-peach-bg: var(--gogo-peach-paper);
    --gogo-tone-lilac-bg: var(--gogo-lilac-wash);
    --gogo-tone-aqua-bg: var(--gogo-aqua-wash);
    --gogo-tone-blue-bg: var(--gogo-blue-mist);

    /* Post formats: the only meaning pastel carries (owner, 1 Oct 2026). A colour finds the
       format before the label is read, the same on a card, a post's chip and a weekday card. */
    --gogo-format-problem-bg: var(--gogo-tone-peach-bg);
    --gogo-format-challenge-bg: var(--gogo-tone-lilac-bg);
    --gogo-format-experience-bg: var(--gogo-tone-aqua-bg);

    /* Rail modules: subscribe on the blue mist, which no format uses; the talk-it-through card
       is white, since its old peach read as a Problem post. */
    --gogo-signup-bg: var(--gogo-tone-blue-bg);
    --gogo-talk-bg: var(--gogo-canvas);

    /* Blobs: the four colours of the portrait's and the covers' background shapes, on the round
       tile behind an ink icon. They give /about and the rail the illustrations' warmth without
       tinting a whole card, which stays a post format's job. Ink on each is 12:1 or more. */
    --gogo-blob-peach: var(--gogo-sunrise-1);
    --gogo-blob-lilac: var(--gogo-sunrise-2);
    --gogo-blob-sky: var(--gogo-sunrise-3);
    --gogo-blob-aqua: var(--gogo-sunrise-4);
    --gogo-blob-ink: var(--gogo-ink);

    /* Inverse (the phone drawer), decoration, errors */
    --gogo-inverse-bg: var(--gogo-ink);
    --gogo-inverse-text: var(--gogo-white);
    --gogo-inverse-muted: var(--gogo-smoke);
    --gogo-decor: var(--gogo-smoke);
    --gogo-danger: var(--gogo-red-deep);
    /* The friendly "it worked" notice: deep green on white, 5.88:1 (AA) */
    --gogo-success: var(--gogo-green-deep);

    /* Terminal card (hero visual) */
    --gogo-term-bg: var(--gogo-term-black);
    --gogo-term-bar: var(--gogo-term-bar-black);
    --gogo-term-fg: var(--gogo-term-white);
    --gogo-term-ok: var(--gogo-term-green);
    --gogo-term-warn: var(--gogo-term-amber);
    --gogo-term-muted: var(--gogo-term-grey);
    --gogo-term-dot-close: var(--gogo-term-red);
    --gogo-term-dot-min: var(--gogo-term-amber);
    --gogo-term-dot-max: var(--gogo-term-green);

    /* Radius */
    --gogo-radius-sm: 8px;
    --gogo-radius-card: 24px;
    --gogo-radius-pill: 9999px;

    /* Elevation: hairlines carry structure; shadow only lifts the floating nav capsule, the
       terminal card, and (upward) the footer band. */
    --gogo-shadow-none: none;
    --gogo-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --gogo-shadow-lift: 0 24px 48px rgba(0, 0, 0, 0.18);
    --gogo-shadow-up: 0 -8px 24px rgba(0, 0, 0, 0.06), 0 -1px 2px rgba(0, 0, 0, 0.04);

    /* Space: 4px base */
    --gogo-space-1: 4px;
    --gogo-space-2: 8px;
    --gogo-space-3: 12px;
    --gogo-space-4: 16px;
    --gogo-space-5: 20px;
    --gogo-space-6: 24px;
    --gogo-space-8: 32px;
    --gogo-space-10: 40px;
    --gogo-space-12: 48px;
    --gogo-space-16: 64px;
    --gogo-space-24: 96px;
    --gogo-section-gap: var(--gogo-space-16);
    --gogo-gutter: var(--gogo-space-4);

    /* Layout */
    --gogo-container-max: 1200px;
    --gogo-measure: 720px;
    --gogo-touch: 44px;
    --gogo-focus-width: 2px;
    --gogo-hairline-width: 1px;
    --gogo-nav-height: 56px;
    --gogo-nav-offset: 16px;
    /* Offset + the bar's 56 + its two 1px borders: where the bar ends. */
    --gogo-nav-clear: 74px;
    /* From the bar's bottom edge to the first content of every page. */
    --gogo-nav-after: var(--gogo-space-16);
    /* Bar edge to its text on the sides: about the pill radius (the bar is 58 tall with its
       border), so the text starts where the round end stops curving and reads level with the
       top gap. */
    --gogo-nav-inset: 28px;
    --gogo-hero-overlap: 48px;
    /* Above UIkit sticky (980), so a stuck rail module slides under the menu, never over it;
       below the off-canvas drawer (1000). */
    --gogo-z-nav: 990;

    /* Type families */
    --gogo-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --gogo-font-display: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --gogo-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Type scale. Headings are Poppins 600 (it ships one weight), with the reference's tracking:
       about -0.025em on display and h1, -0.02em on h2. */
    --gogo-display-size: 40px;
    --gogo-display-weight: 600;
    --gogo-display-tracking: -0.025em;
    --gogo-display-leading: 1.1;

    --gogo-h1-size: 36px;
    --gogo-h1-weight: 600;
    --gogo-h1-tracking: -0.025em;
    --gogo-h1-leading: 1.15;

    --gogo-h2-size: 28px;
    --gogo-h2-weight: 600;
    --gogo-h2-tracking: -0.02em;
    --gogo-h2-leading: 1.25;

    --gogo-h3-size: 22px;
    --gogo-h3-weight: 600;
    --gogo-h3-leading: 1.3;

    --gogo-body-size: 17px;
    --gogo-body-leading: 1.65;
    --gogo-small-size: 14px;
    --gogo-small-leading: 1.5;

    /* Labels share the small size (designux four-levels: about four sizes and two weights;
       owner, 1 Oct 2026). The scale is 14 / 17 / 22 / 32 / 48, plus 72 for the home headline.
       Labels are Inter semibold in sentence case, the soft voice of the rest of the theme; mono
       stays for dates and code only. */
    --gogo-label-size: var(--gogo-small-size);
    --gogo-label-weight: var(--gogo-weight-semibold);
    --gogo-label-tracking: 0;

    /* Two weights only: regular for text, semibold for headings, strong text and actions. */
    --gogo-weight-regular: 400;
    --gogo-weight-semibold: 600;
}

/* Mobile-first: the phone values above, the desktop values from @s (640px) up. */
@media (min-width: 640px) {
    :root {
        --gogo-section-gap: var(--gogo-space-24);
        --gogo-gutter: var(--gogo-space-8);
        --gogo-hero-overlap: 96px;
        --gogo-display-size: 72px;
        --gogo-h1-size: 48px;
        --gogo-h2-size: 32px;
    }
}