/* tunnelops — design tokens.
 *
 * Extracted from web/landing/index.html, which is the source of truth for the
 * visual language. Nothing here was invented: every value below is a value that
 * was already on the landing page, and the comment on each one says where. The
 * point of the file is that the cabinet and the admin panel read as the same
 * product as the front page rather than as a service next door.
 *
 * Two rules for anyone editing this:
 *
 *   1. A new colour or a new spacing step is a token first and a use second.
 *      components.css is allowed to reference tokens and nothing else, and
 *      web/web_test.go fails the build if a literal colour appears in it.
 *
 *   2. Changing a value here changes the landing page. internal/landing's
 *      TestTheLandingPageLooksExactlyAsItDidBeforeTheTokens resolves every
 *      var() on the page against this file and compares the result to a
 *      committed snapshot of the stylesheet as it was before it was split, so a
 *      value edited by accident is a failing test rather than a redesign
 *      nobody asked for. If you mean to change the look, update the snapshot in
 *      the same commit and say so.
 *
 * The landing page's fonts are @font-face'd by web/landing/assets/fonts.css,
 * which this file deliberately does not duplicate — the families are named here,
 * the files are loaded there.
 *
 * There is no dark theme. The product is light; the *sections* that are dark
 * (hero, calculator, terminal, footer, the picked product card) are a device of
 * the layout, not a user preference, and that is what the --d-* ramp below is.
 */

:root{

  /* ══════════════════════════════════════════════════════════════════════════
     COLOUR — the light surface
     ══════════════════════════════════════════════════════════════════════════ */

  /* The near-black. Body text, and the background of every dark section:
     .hero, .cta, .term, .calc, .prod--pick, and the rule above .faq. */
  --ink:      #0A0D0F;
  /* One step up. The footer's background, and the field inside the price
     calculator (.qty, .qbtn, .chip). */
  --ink-2:    #12171A;
  /* Two steps up. .btn-dark:hover, the hover state of the calculator's
     +/− buttons, and the text colour of the code samples in <pre>. */
  --ink-3:    #1D242A;
  /* Body prose on the policy pages (/terms, /privacy) — paragraphs, list
     items, the cells of the retention table. Not used on the landing itself. */
  --slate:    #333C44;

  /* The page background. Also the strip behind the code-sample tabs. */
  --paper:    #EEF0F1;
  /* One step down from the page. Hover behind a nav link, and the background
     of inline <code> in the policy pages. */
  --paper-2:  #E4E7E9;
  /* White. Cards (.prod, .code-wrap, .card, .rule), the .trust-sec band, and
     the hover of a price-tier row. */
  --surface:  #FFFFFF;

  /* The three text greys, and the one part of this file that is a floor rather
     than a record of what the landing page happened to use.

     A Chromium pass measured every element's painted colour against the first
     opaque thing behind it, and the old ramp — #5F676E and #8F979E — failed AA
     on every cabinet, panel and login screen: --faint came out at 2.96:1 on
     white and 2.39:1 on --paper-2, where the floor for body text is 4.5:1.

     The constraint that sets the whole ramp is --faint on --paper-2, the
     darkest light surface it lands on: clearing 4.5:1 there caps it at about
     L*43, which is where --muted used to sit. So --muted moved down with it,
     and --ink did not move at all — it is already 19.5:1 on white, and it is
     also the *background* of every dark section, which is not a value that can
     be nudged for a text reason.

     What each measures, against the four grounds a cabinet actually paints on
     (white card, --paper page, --paper-2 hover, and a --card--note tint, which
     is --petrol-s composited over --paper and the darkest of the four):

                  white   paper   paper-2   note tint
       --ink      19.49   17.05     15.69       15.05
       --muted     9.53    8.34      7.68        7.36
       --faint     6.00    5.25      4.83        4.64

     The three stay three: L* 3.5 / 29.4 / 42.0, so --muted reads 1.6:1 against
     --faint and the steps are still told apart at a glance. They are closer
     together than they were, and that is the cost of a floor. */

  /* Secondary text: section ledes, table labels, nav links at rest, the
     "saving" column of the price grid. */
  --muted:    #41464B;
  /* Third-level text: column headings in the price grid, comments in the code
     samples, the arrow a tier row grows on hover. The lightest grey allowed to
     carry text anywhere in the product. */
  --faint:    #5E6468;

  /* The hairline. Every border between two light surfaces: card edges, the
     rows of the price grid, the FAQ dividers, the nav's bottom edge. */
  --line:     #DDE1E4;
  /* The heavier border: .btn-ghost at rest, the rule above the .rail, the
     underline of the pricing tab strip, the dot of an unselected tier. */
  --line-2:   #C4CACF;

  /* ══════════════════════════════════════════════════════════════════════════
     COLOUR — accents
     ══════════════════════════════════════════════════════════════════════════ */

  /* Petrol: the accent on light surfaces. .btn-primary, .eyebrow, the selected
     pricing tab's underline, the numerals in the .rail, links in prose. */
  --petrol:   #0B6D69;
  /* .btn-primary:hover. */
  --petrol-d: #075350;
  /* Petrol at 9%: the background of the selected price-tier row and of a
     ghost CTA on hover. */
  --petrol-s: rgba(11,109,105,.09);
  /* Petrol at 32%: the underline under a link in the policy pages' prose. */
  --petrol-l: rgba(11,109,105,.32);
  /* The hero's radial wash behind the network map. */
  --petrol-glow:   rgba(11,109,105,.42);
  /* The same wash in the closing CTA band, two points weaker. */
  --petrol-glow-2: rgba(11,109,105,.4);

  /* Signal: the accent on dark surfaces. The <em> in the hero headline, the
     map's nodes, .btn-signal, the price on the picked product card, the check
     marks in the trust row, the focus ring. */
  --signal:    #19D2BE;
  /* .btn-signal:hover. */
  --signal-h:  #3FE0CE;
  /* Text on a signal-coloured button — near-black with the hue in it, so the
     button does not read as two unrelated colours. */
  --signal-ink:#04211E;
  /* Signal at 13%: the highlighted segment of the connection string, and the
     background of the calculator's "you save" pill. */
  --signal-s:  rgba(25,210,190,.13);
  /* Signal at 40%: the border of that highlighted segment. */
  --signal-b:  rgba(25,210,190,.4);
  /* Signal at 30%: the border of the "you save" pill. */
  --signal-b2: rgba(25,210,190,.3);
  /* Signal at 70%: the glow under the picked product's CTA on hover. */
  --signal-glow: rgba(25,210,190,.7);

  /* ══════════════════════════════════════════════════════════════════════════
     COLOUR — states
     ══════════════════════════════════════════════════════════════════════════ */

  /* Amber. Declared on the landing page and used by the policy pages; in the
     cabinet it is the warning state — a balance that runs out inside a week,
     a country with one live address left, a tariff below cost. */
  --warn:     #C8811A;
  /* Amber at 10% and 30%: the fill and the border of a warning notice. Derived
     here for components.css, at the same alphas the landing already uses for
     petrol (9%) and signal (13%) so the whole family reads alike. */
  --warn-s:   rgba(200,129,26,.10);
  --warn-b:   rgba(200,129,26,.30);
  /* Amber as *ink*, which is a different colour from amber as a fill.
     --warn above is 3.18:1 on white and 2.87:1 on its own tint — fine for a
     3px left border or a filled chip, under the floor for a word. Rather than
     darken --warn and lose the fill, the foreground is its own token: the same
     hue taken down until it clears 4.5:1 on every ground a warning lands on —
     6.26 on white, 5.66 on --warn-s over white, 4.99 over --paper, 5.04 on
     --paper-2. Use it for any `color:`; use --warn for a background, a border
     or a progress bar. On a *dark* surface neither applies: that is --d-warn. */
  --warn-ink: #865611;

  /* Red. From the policy pages, where it marks the forbidden-use list and the
     one card somebody must not miss. In the cabinet it is the error state and
     the destructive action: .btn-danger, a field that failed validation, a
     banned account.

     Checked the same way --warn was, and it needs no --stop-ink: as ink it is
     6.06:1 on white, 5.30 on --paper, 4.88 on --paper-2, 4.83 on its own
     --stop-s and 4.68 on a note tint; as a fill, white on it is 6.06:1. Every
     one of those clears 4.5. */
  --stop:     #B4342B;
  /* Red at 8%: the fill of a .card--stop on the policy pages. */
  --stop-s:   rgba(180,52,43,.08);
  /* Red at 30%: the border of an error notice, matching --warn-b. */
  --stop-b:   rgba(180,52,43,.30);
  /* Red darkened for the hover of a destructive button, by the same relation
     --petrol-d has to --petrol. */
  --stop-d:   #93281F;

  /* Petrol doubles as the success colour: the product has one positive accent
     and inventing a green would give it two. --ok is an alias so a component
     can say what it means.

     It needs no --ok-ink either: 6.17:1 on white, 5.39 on --paper, 4.96 on
     --paper-2, 4.91 on its own --ok-s and 4.76 on a note tint, and white on a
     petrol fill is 6.17. Amber was the only one of the three that could not
     carry a word, which is what a hue at that lightness does. */
  --ok:       var(--petrol);
  --ok-s:     var(--petrol-s);
  --ok-b:     var(--petrol-l);

  /* THE THREE STATE TINTS AGAIN, OPAQUE
     ─────────────────────────────────────────────────────────────────────────
     --ok-s, --warn-s and --stop-s are translucent, which is right for a notice
     or a card: a tint that takes the colour of the surface under it belongs to
     that surface. It is wrong for a badge. A badge is a small fixed component
     that gets put wherever a status needs saying, and a Chromium pass caught
     three of them failing AA for exactly that reason — the badge's own tint
     composited over a toned card and the ink lost the ground it was chosen
     against:

       .badge--ok   "credited"      on /app/pay        3.52:1 on rgb(189,197,197)
       .badge--warn "not in balance" on /app/referrals  3.71:1 on rgb(200,199,196)
       .badge--warn "internal note"  on a staff message 3.71:1 on rgb(200,199,196)

     So the badge gets a ground of its own: the same three tints, composited
     over --surface once, here, and frozen. On a white card the pixels are
     unchanged — this is that composite — and on a toned one the badge no longer
     darkens with the card. With them the five tones measure 5.42 (ok), 5.65
     (warn), 5.37 (stop), 5.40 (info) and 7.68 (neutral); info and neutral are
     already opaque and already sit on --paper-2.

     Only the light three are here. .badge--signal exists only inside
     .card--dark, whose background is --ink and is opaque, so its tint has one
     backdrop and only one — it measures 8.28:1 and needs no twin. */
  --ok-flat:   #E9F2F2;
  --warn-flat: #FAF2E8;
  --stop-flat: #F9EFEE;

  /* ══════════════════════════════════════════════════════════════════════════
     COLOUR — the dark ramp
     ══════════════════════════════════════════════════════════════════════════

     The landing page's dark sections carry their own greys, hand-tuned against
     --ink rather than sampled from the light ramp. They are collected here
     because the cabinet needs them for exactly the same job: the top bar, the
     side navigation, and any panel that has to read as chrome rather than as
     content. */

  /* Pure white: text and rules on the dark sections. --surface is the same
     value but names a card background, and the two are not the same idea —
     a card that stopped being white would not make the hero headline grey. */
  --white:    #FFFFFF;

  /* The hairline on --ink: the rule above the trust row and the figures, the
     dividers between figures, the calculator's header, the footer's rules. */
  --d-line:   #232A30;
  /* The hairline *inside* a dark card, half a step warmer: the description
     rule in the terminal, and the spec list of the picked product card. */
  --d-line-2: #242C32;
  /* The border of a control on dark: the quantity stepper, the preset chips,
     the copy button. */
  --d-line-3: #2C353B;
  /* The border of a ghost button on dark, and the calculator's arrow glyph. */
  --d-line-4: #39424A;
  /* The hover surface on dark: a connection-string segment under the cursor,
     and the copy button's own background. */
  --d-raise:  #1B2227;

  /* The text ramp on dark, brightest first. Five steps, because that is how
     many the landing page turned out to use.
       --d-strong  the connection string itself, the copy button, spec values
       --d-body    the hero subheading, the terminal's description, stepper glyphs
       --d-muted   the trust row, the preset chips, the footer's base text
       --d-faint   figure captions, section labels, calculator field labels
       --d-dim     the calculator's "presets" caption */
  --d-strong: #C9D1D7;
  /* Two more steps, from the policy pages' dark header rather than from the
     landing page: the <b> in the metadata line, which is the brightest thing on
     that band short of the heading, and the standfirst under it. They are here
     rather than in web/landing/assets/pages.css because that file used to carry
     its own copy of the whole palette, and a second copy of a colour is a colour
     that will one day only be half changed. */
  --d-bright: #D3D8DB;
  --d-body:   #A9B3BA;
  --d-body-2: #9AA3A9;
  --d-muted:  #8B959C;
  --d-faint:  #79838A;
  --d-dim:    #68727A;
  /* And three more, only in the footer and only because a footer is meant to
     recede: the legal line, the geodata attribution, and the underline under
     a link inside it.

     --d-dim-2 carries words, and at #5E686F it measured 3.17:1 on --ink-2,
     which is the footer's own background. --d-faint is the dimmest grey on
     this ramp that clears 4.5:1 on --ink (5.04) and on --ink-2 (4.67), so
     --d-dim-2 was lifted to just above it. Everything below is a rule or an
     underline and carries no text; nothing below --d-faint may. */
  --d-dim-2:  #7B858C;
  --d-dim-3:  #4E585F;
  --d-rule:   #3A444B;
  /* The punctuation between the parts of the connection string — dimmer than
     any text so the parts themselves are what the eye lands on. Not a text
     colour: it is 2.55:1 on --ink. The two components that used it for words
     — the panel's health caption and a comment in a code sample — were moved
     to --d-faint; what is left of it is a separator glyph and the ink of a
     disabled control, which WCAG exempts. */
  --d-punct:  #4A555C;

  /* Alarm on dark. --warn and --stop are mixed for white paper and land at
     about 3:1 on the panel's rail, which is under the floor for the small text
     they would be used at there. These are the same two hues lifted until they
     clear it, and they exist for exactly one thing: the platform-state block at
     the foot of the admin rail. On paper, keep using --warn and --stop. */
  --d-warn:   #E0A03C;
  --d-stop:   #E4655B;
  /* And the affirmative one, which is just the panel's own accent. */
  --d-ok:     var(--signal);

  /* The sticky nav: white at 82%, over an 18px backdrop blur. */
  --nav-bg:   rgba(255,255,255,.82);
  /* The coastlines of the network map in the hero. */
  --map-land: rgba(255,255,255,.19);
  /* The one blue on the site: a language keyword in the code samples. It is
     also chart series 3, which is why it is a token and not a literal. */
  --code-kw:  #2B5AA8;

  /* ══════════════════════════════════════════════════════════════════════════
     COLOUR — charts
     ══════════════════════════════════════════════════════════════════════════

     Eight series, every one of them a colour that is already on the landing
     page. A chart needs categorical colours and the landing has no palette for
     that job, so this is the palette assembled from what exists rather than a
     new set of hues: two petrols, the signal, the code blue, amber, red, and
     two neutrals. Ordered so the first three are distinguishable to a viewer
     with the common forms of colour blindness. */
  --chart-1: var(--petrol);
  --chart-2: var(--warn);
  --chart-3: var(--code-kw);
  --chart-4: var(--signal);
  --chart-5: var(--stop);
  --chart-6: var(--petrol-d);
  --chart-7: var(--slate);
  --chart-8: var(--faint);

  /* The sequential ramp, for a choropleth (traffic by country) where the
     question is "how much", not "which one". Petrol at five alphas. */
  --chart-seq-1: rgba(11,109,105,.10);
  --chart-seq-2: rgba(11,109,105,.26);
  --chart-seq-3: rgba(11,109,105,.45);
  --chart-seq-4: rgba(11,109,105,.68);
  --chart-seq-5: rgba(11,109,105,1);
  /* The grid behind a chart, and the axis labels: the same hairline and the
     same third-level text as everything else. */
  --chart-grid: var(--line);
  --chart-axis: var(--faint);

  /* ══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY — families
     ══════════════════════════════════════════════════════════════════════════ */

  /* Manrope 800, tight tracking: every heading on the site. */
  --f-dsp:  'Manrope',system-ui,sans-serif;
  /* Golos Text: body copy, buttons, nav, form labels. The default on <body>. */
  --f-body: 'Golos Text',system-ui,-apple-system,sans-serif;
  /* Manrope again, but for a different job — labels, figures and rates. Named
     separately because the *role* is numeric and typographic, and if the two
     ever want different faces this is the seam. */
  --f-mono: 'Manrope',system-ui,sans-serif;
  /* A real monospace, and only for code and the connection string, where
     column alignment is the whole point. No webfont: the system's own
     monospace is better than one more download. */
  --f-code: ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* ══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY — sizes
     ══════════════════════════════════════════════════════════════════════════

     The ramp the landing page actually uses, named by role. Half-pixel steps
     are not a mistake: 14.5px next to 14px is the landing's own optical
     tuning between two adjacent blocks, and rounding it to a "cleaner" scale
     would be a redesign.

     THE BOTTOM OF THE SCALE IS 13px AND IT IS A FLOOR

     The specification says no text under 13px, and cmd/api/screenshot_test.go
     asserts it at every width. Seven steps used to live under that line —
     --fs-col 9.5, --fs-eyebrow 10.5, --fs-2xs 11, --fs-xs 11.5, --fs-sm 12,
     --fs-label 12.5 — and the measured smallest text on a cabinet page was
     9.5px. They are gone rather than rounded up, because six tokens all
     holding 13px is six names for one size and the next person would have
     picked one at random: every use of them now says --fs-ui-sm.

     Only the small end moved. --fs-ui and everything above it, and every
     clamp() from --fs-h1 down, are untouched — the one exception is
     --fs-anat, whose clamp bottomed out at 12px and now bottoms out at 13.

     What that costs is the sub-13 half of the ramp: a micro-label and the
     prose beside it are now the same size, and the difference between them is
     carried by tracking, weight, case and colour instead. There is nowhere
     else for it to be carried — the next size up is 13.5px, and a caption
     bigger than the sentence it captions is worse than one the same size. */

  /* 13px — the floor. Uppercase micro-labels (.eyebrow, a table's column
     heading, the rail's group headings), captions, hints, badges, .btn--sm,
     spec rows, dense table cells: everything that used to be smaller. */
  --fs-ui-sm:   13px;
  /* 13.5px — nav links, footer links, the terminal's description, FAQ answers. */
  --fs-ui:      13.5px;
  /* 14px — .btn, the trust list's terms, the .rail's headings. The default
     for a control. */
  --fs-ctl:     14px;
  /* 14.5px — section ledes, product descriptions, FAQ questions, the pricing
     tab strip. The reading size for secondary prose. */
  --fs-lede:    14.5px;
  /* 15px — <body>. Everything inherits this unless it says otherwise. */
  --fs-body:    15px;
  /* 15.5px — the hero's subheading, the one paragraph that is larger than
     body copy because it is the first thing read. */
  --fs-hero-sub:15.5px;
  /* 16px — an <h3> inside the policy pages' prose. */
  --fs-h4:      16px;
  /* 17px — the heading of a price tier group. */
  --fs-h3-sm:   17px;
  /* 20px — a product card's heading. */
  --fs-h3:      20px;
  /* 22px — the calculator's quantity field. */
  --fs-num-sm:  22px;
  /* 26px — a product card's price. The largest fixed size; everything above
     this is a clamp() because it has to survive a phone. */
  --fs-num:     26px;

  /* The fluid sizes, verbatim from the landing page. clamp(min, preferred,
     max) rather than breakpoint steps, because a headline that jumps two sizes
     at 1080px looks like a bug on a tablet held sideways. */
  --fs-h1:      clamp(31px,3.9vw,55px);   /* the hero headline */
  --fs-h2:      clamp(24px,2.7vw,38px);   /* .sec-title, and the closing CTA */
  --fs-h2-sm:   clamp(22px,2.4vw,30px);   /* the trust section's heading */
  --fs-doc-h1:  clamp(26px,3.2vw,42px);   /* a policy page's title */
  --fs-fig:     clamp(25px,3.3vw,44px);   /* the four figures under the hero */
  --fs-total:   clamp(38px,4.6vw,54px);   /* the calculator's total */
  --fs-anat:    clamp(13px,1.5vw,17px);   /* the connection string; 13 is the floor */

  /* ══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY — weight, tracking, leading
     ══════════════════════════════════════════════════════════════════════════ */

  --fw-normal: 400;   /* prose */
  --fw-medium: 500;   /* .eyebrow, tab labels at rest, rates */
  --fw-semi:   600;   /* buttons, table headers, an active tab, <h4>/<h5> */
  --fw-bold:   700;   /* figures, prices, totals, a tier heading */
  --fw-black:  800;   /* h1, h2, h3 — the display face's own weight */

  /* Negative tracking on the display face, tighter the larger it gets. The
     four steps are the four places the landing page sets it. */
  --ls-h:      -.042em;  /* h1, h2, h3 */
  --ls-h-sm:   -.02em;   /* an <h3> in prose, where -.042em would read cramped */
  --ls-num:    -.04em;   /* a price */
  --ls-fig:    -.045em;  /* a figure */
  --ls-total:  -.055em;  /* the calculator's total, the largest numeral */
  --ls-mobile: -.035em;  /* the hero headline once it is 30px on a phone */
  --ls-anat:   -.01em;   /* the connection string, barely, to close the gaps */

  /* Positive tracking, for the uppercase micro-labels. Three steps, and which
     one is used depends on how small the label is. */
  --ls-caps:    .19em;   /* .eyebrow, and a policy page's contents heading */
  --ls-caps-2:  .17em;   /* the calculator's header */
  --ls-caps-3:  .15em;   /* the price grid's column headings */
  --ls-caps-4:  .14em;   /* a section number, the retention table's headers */
  --ls-caps-5:  .16em;   /* the terminal's label */
  --ls-caps-6:  .09em;   /* a <details> summary */
  --ls-caps-7:  .22em;   /* the 404 page's code */

  --lh-tight:   1.05;    /* h1, h2, h3 */
  --lh-heading: 1.45;    /* a FAQ question, which wraps to two lines */
  --lh-none:    1;       /* a button, a figure, a price — single-line by design */
  --lh-body:    1.55;    /* <body>, and every list item */
  --lh-prose:   1.6;     /* the hero subheading, the terminal's description */
  --lh-code:    1.75;    /* a code sample, where the lines need air */
  --lh-anat:    1.9;     /* the connection string, which wraps mid-string */

  /* ══════════════════════════════════════════════════════════════════════════
     SPACE
     ══════════════════════════════════════════════════════════════════════════

     --gut and --sec are the landing page's own two variables and the only
     spacing that changes with the viewport; the ramp below them is the set of
     values the page uses inside a block, collected so the cabinet has a scale
     instead of a habit. */

  /* The page gutter: the left and right padding of every .wrap. Shrinks at
     1080px and again at 600px — see the breakpoint blocks at the bottom. */
  --gut: 40px;
  /* The vertical rhythm: the padding above and below a .section. Shrinks with
     the gutter, and by roughly the same proportion. */
  --sec: 54px;

  --sp-1:  4px;   /* the gap inside a stat's label, a chip's vertical padding */
  --sp-2:  6px;   /* the gap between two buttons in the nav */
  --sp-3:  8px;   /* a button's icon gap, the gap between preset chips */
  --sp-4:  10px;  /* a section lede's top margin, a card's list gap */
  --sp-5:  12px;  /* a heading's top margin, a table cell's vertical padding */
  --sp-6:  14px;  /* the gap between cards in a grid */
  --sp-7:  16px;  /* a card's internal rule, a form row's gap */
  --sp-8:  18px;  /* a dark card's foot, the gap above a CTA */
  --sp-9:  20px;  /* a button's horizontal padding, a <pre>'s padding */
  --sp-10: 22px;  /* a card's own padding */
  --sp-11: 26px;  /* the nav's internal gap, the .rail's column gap */
  --sp-12: 32px;  /* the gap between two columns on a tablet */
  --sp-13: 40px;  /* the gap between the halves of a two-column section */
  --sp-14: 48px;  /* the widest gap on the page: hero copy to hero map */

  /* ══════════════════════════════════════════════════════════════════════════
     SHAPE
     ══════════════════════════════════════════════════════════════════════════ */

  /* 3px. Cards, buttons, inputs, panels — everything. The site is nearly
     square-cornered on purpose and there is no larger radius to reach for. */
  --r:   3px;
  /* 2px, for something small enough that 3px would read as round: a chip, a
     highlighted segment of the connection string, the savings pill. */
  --r-s: 2px;

  /* Borders. One width, and it is the hairline everywhere. */
  --bw:  1px;
  /* The two accents that are drawn as a thick edge rather than a fill: the
     top rule of a rules card, the left rule of a note. */
  --bw-accent: 3px;
  /* The underline of an active tab. */
  --bw-tab: 2px;

  /* ══════════════════════════════════════════════════════════════════════════
     ELEVATION
     ══════════════════════════════════════════════════════════════════════════

     Three shadows, all of them from the landing page, all of them with a
     negative spread so they read as a lifted edge rather than as a drop
     shadow. There is no fourth: a panel that needs more separation than this
     wants a border instead. */

  /* Under the sticky nav. Almost invisible until something scrolls under it. */
  --sh-nav: 0 10px 26px -24px rgba(10,13,15,.65);
  /* Under something that opened over the page: the mobile nav sheet, a
     dropdown, a modal. */
  --sh-pop: 0 18px 30px -26px rgba(10,13,15,.7);
  /* The signal glow under the picked product's CTA on hover. The one shadow
     on the site that carries a hue. */
  --sh-signal: 0 6px 18px -8px var(--signal-glow);

  /* ══════════════════════════════════════════════════════════════════════════
     MOTION
     ══════════════════════════════════════════════════════════════════════════ */

  /* The landing page's easing curve: fast out, long settle. */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .14s;   /* a table row's background on hover */
  --t-base: .18s;   /* a button, a link, a nav item — the default */
  --t-slow: .2s;    /* a card that also moves, so the move is legible */

  /* ══════════════════════════════════════════════════════════════════════════
     LAYERS
     ══════════════════════════════════════════════════════════════════════════

     The landing page has exactly one stacking value, z-index:900 on the nav.
     The rest of this scale is what the cabinet needs on top of it, spaced so
     there is room to insert something without renumbering. */
  --z-side:  800;  /* the side navigation */
  --z-nav:   900;  /* the sticky top bar — the landing page's value */
  --z-modal: 1000; /* a modal's backdrop and box */
  --z-toast: 1100; /* a toast, which must be visible over a modal */

  /* ══════════════════════════════════════════════════════════════════════════
     BREAKPOINTS
     ══════════════════════════════════════════════════════════════════════════

     Recorded as tokens because they belong to the design system, and used as
     literals in @media below because CSS media queries cannot read a custom
     property — var() resolves at computed-value time, long after a media
     query has been evaluated. The literals and these tokens are checked
     against each other by web/web_test.go, so they cannot drift apart.

       --bp-wide    1240px  the price grid's calculator column narrows
       --bp-lap     1080px  three-column grids collapse; the gutter shrinks
       --bp-tab      820px  the nav becomes a burger; side nav becomes a tab bar
       --bp-phone    600px  one column everywhere; the gutter shrinks again
       --bp-narrow   380px  the figures stack; the price grid drops a column */
  --bp-wide:   1240px;
  --bp-lap:    1080px;
  --bp-tab:     820px;
  --bp-phone:   600px;
  --bp-narrow:  380px;

  /* ══════════════════════════════════════════════════════════════════════════
     MEASURE
     ══════════════════════════════════════════════════════════════════════════

     How wide a thing is allowed to get. Two values, and they are limits rather
     than sizes: everything below them is fluid.

       --measure-page   the content column of the cabinet and the panel. The
                        same number as --bp-wide, because that is the width the
                        layout was drawn at — past it the extra pixels went to
                        the content and nothing else, which is how a card ends
                        up a metre wide on a 2560px monitor.
       --measure-prose  a run of text. 68 characters: past about 75 the eye
                        loses the start of the next line, and a paragraph in a
                        cabinet is read once, quickly, not studied. */
  --measure-page:  1240px;
  --measure-prose: 68ch;

  /* ══════════════════════════════════════════════════════════════════════════
     THE POINTER TARGET
     ══════════════════════════════════════════════════════════════════════════

     44px, the floor for anything meant to be tapped. It is a token because it
     is asserted: every screen is checked at every width for a clickable element
     smaller than this on its short side, and a number two places disagree about
     is a number one of them fails on.

     It applies to the short side. A wide button is already past it; the ones
     that need saying are the square ones — an icon-only control in a table row,
     a pager arrow, a close button. */
  --tap: 44px;
}

/* The gutter and the section rhythm, at each width where the landing page
   changes them. These are the only tokens that are not constant, and they are
   the reason a page can be laid out without a single media query of its own. */
@media (max-width:1080px){
  :root{--gut:28px; --sec:42px}
}
@media (max-width:600px){
  :root{--gut:16px; --sec:34px}
}