/*
 * Checklist item 19 — every colour, size, radius and shadow the site uses, in
 * one file, so that `site.css` contains layout and nothing arbitrary.
 *
 * This file exists as a separate stylesheet rather than a block at the top of
 * site.css because the CSP (`style-src 'self'`, no inline <style>) means both
 * arrive as linked files anyway, and splitting them makes "is this value used
 * twice?" answerable by reading sixty lines instead of fifteen hundred.
 *
 * THE PALETTE IS THE TEMPLATE'S, AND IT IS WARM PAPER RATHER THAN WHITE.
 * The site was rebuilt onto a landing-page template whose whole character comes
 * from three decisions: an off-white paper ground, near-black type set very
 * tight, and one saturated yellow used only for accents. Nothing here is a
 * remnant of the old design's lavender haze — that has been removed entirely
 * rather than left behind unused, because a token nothing references is a value
 * the next person has to decide whether to trust.
 *
 * THE COLOUR SCHEME IS LIGHT, ON PURPOSE, AND THERE IS NO DARK MODE.
 * `color-scheme: light` is declared below, which is what stops a browser in
 * dark mode from synthesising its own inverted form controls and scrollbars
 * against our paper surfaces. The reason is specific to this site rather than a
 * general preference: the page shows six full-bleed screenshots of an app
 * running in its light theme, and no CSS can darken the inside of a PNG. A dark
 * page would frame six blazing white rectangles in near-black, which looks
 * broken rather than dark. Two bands (pricing and the closing call to action)
 * are dark on purpose, and no screenshot appears in either of them.
 */

:root {
  /* Light only. See the header comment. */
  color-scheme: light;

  /*
   * The template is set in Arial. That stands, and the CJK faces are appended
   * rather than substituted: /zh has to be legible on macOS (PingFang SC),
   * Windows (Microsoft YaHei) and older macOS (Hiragino Sans GB), and a Latin
   * face has to come first so the English page never picks a CJK face for its
   * Latin glyphs — which would render at the wrong weight and spacing.
   *
   * No webfont and no font CDN: `font-src 'self'` forbids the second and we
   * ship no font file for the first.
   */
  --font-sans: Arial, Helvetica, "Helvetica Neue", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* The five colours the template is built from. */
  --paper: #f5f4ef;
  --ink: #0d0d0e;
  --muted: #6b6b69;
  --line: #e2e0d9;
  --yellow: #ffed75;

  /* Two darks. `--dark` is the flat band behind the closing call to action;
     `--deep` is the base the pricing band's radial fields are painted over. */
  --dark: #2e3441;
  --deep: #303744;

  /* Surfaces above the paper ground. `--card` is the white a floating panel
     uses; `--sand` is the barely-there card fill the grids use, so a grid of
     eight cards does not read as eight white holes punched in the paper;
     `--tint` is the sunken tray behind the FAQ list. */
  --card: #fffefd;
  --sand: #fbfaf7;
  --tint: #eeece6;

  /* Text that is not the primary ink, on each of the two grounds. */
  --muted-dark: #d4d6db;

  /* Hairlines. Alpha rather than solid so a border drawn over a dark band picks
     up what is underneath instead of cutting a grey line through it. */
  --line-soft: rgba(226, 224, 217, 0.8);
  --line-dark: rgba(255, 255, 255, 0.22);

  /* Focus ring. `outline: none` is not an option and a near-black ring on a
     near-black button is invisible, so the ring is violet — it reads on paper,
     on white and on both dark bands. */
  --focus: #7c3aed;

  /*
   * The six scene tones. Each is set as `--tone` by a `.tone-N` class and read
   * back by whatever is being tinted (a story orb, a case cover, a story page's
   * hero art). One custom property, six values, so a scene's colour is stated
   * once and every surface that uses it stays in step — and, more to the point,
   * so that none of it has to arrive as a `style=""` attribute, which the CSP
   * forbids outright.
   */
  --tone: #ffbd83;

  /* Radii. */
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows. Wide and low-opacity: a card should read as lifted off the paper
     rather than as an outlined box. `--shadow-press` is the offset slab the
     template's buttons print as they translate on hover. */
  --shadow-header: 0 8px 18px rgba(30, 30, 20, 0.12);
  --shadow-float: 0 19px 33px rgba(41, 38, 32, 0.12);
  --shadow-card: 0 16px 30px rgba(35, 31, 23, 0.07);
  --shadow-panel: 0 12px 25px rgba(0, 0, 0, 0.1);
  --shadow-press: 4px 5px 0 rgba(0, 0, 0, 0.14);

  /* Measure and rhythm. 1120px is the template's shell; the gutter is the
     shell's own padding, so a full-bleed dark band and a text column can line
     up on the same left edge. */
  --shell-width: 1120px;
  --shell-gutter: 48px;
  --measure: 62ch;

  /*
   * The vertical scale.
   *
   * Three steps, chosen by what a gap MEANS rather than by how it looks:
   *
   *   --gap-tight    two things that are one thought — a claim and the evidence
   *                  for it. Reads as "keep looking".
   *   --gap-block    two blocks inside the same argument.
   *   --gap-section  a new subject. Reads as "that was a section".
   *
   * These exist because the seams around the full-bleed app preview measured
   * 60, 0 and 34 while every other seam on the page was 110–198. Nobody chose
   * that: each was tuned on its own, and a gap tuned on its own cannot agree
   * with one three screens away. The values are the template's own rhythm
   * rounded onto a scale — it already clustered near 120 and 160 — so this
   * names what was there rather than reflowing the page.
   *
   * One rule for using them: a seam is owned by ONE side, normally
   * `padding-bottom` on the earlier block. Two sections that both declare
   * padding at the same seam is how a page ends up with a 198px gap nobody can
   * account for.
   */
  --gap-tight: 72px;
  --gap-block: 104px;
  --gap-section: 152px;

  /* Motion. Two curves: `--ease` for state changes a finger causes, `--spring`
     for entrances, which decelerate hard and settle. Everything is disabled
     wholesale under prefers-reduced-motion, in site.css. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 200ms;
  --duration-slow: 450ms;
  --duration-reveal: 800ms;
}