/* The design tokens — docs/DESIGN.md §2 (colour) and §3 (type), transcribed.
 *
 * The web twin of ios/Sources/Design/Tokens.swift. Every value here was
 * measured rather than chosen and the spec records the measurement beside it;
 * the two files must not drift. Two rules survive from that document and are
 * the reason several of these differ from the brand's own palette:
 *
 *   - `ink-faint` NEVER touches the product surface. It measures 3.5:1 on the
 *     ground and fails AA. It exists here only for the build stamp inside the
 *     hidden panel, which we read at 30 cm on purpose.
 *   - The holo gradient does not appear in this app. Only stop 4 survives, as
 *     a flat colour, because the spec asks for *one warm colour*.
 *
 * One px is one pt on every iPhone in landscape (CSS px == iOS logical point),
 * so every number in DESIGN.md is typed here unchanged. Nothing is re-derived.
 *
 * Shared file: the band and the shell read it too. Add, do not repurpose.
 */

:root {
  /* ── §2.2 colour ──────────────────────────────────────────────────────── */

  /* The Panel. The only background in standby and in reaching. */
  --ground: #0e0d0b;
  /* Reserved by the brand; nothing on this screen uses it. Do not reach for it. */
  --sunken: #070605;
  /* The hidden panel strip only (§8). */
  --elevated: #1c1917;

  /* Every word he is meant to read.            15.9:1 on ground */
  --ink: #ede8df;
  /* Secondary words: the day, "sent a photo".   9.0:1 */
  --ink-soft: #b8b0a3;
  /* 3.5:1 — BANNED on the product surface. Build stamp only. */
  --ink-faint-operator-only: #6e675d;

  /* THE one warm colour. Holo stop 4, «наша тёплая нота».  11.9:1 at α 1.
   * One hue, so nothing is ever encoded by hue difference and no form of
   * colour blindness can misread it. */
  --warm: #f6c08b;
  --warm-rgb: 246, 192, 139;
  /* = warm at α 0.28 over ground, pre-composited. Given as a hex so it is
   * checkable; implemented as an alpha. */
  --warm-dim: #4f3f2f;

  /* Read-along: words not yet spoken. `ink` at 0.55, NOT the brand's 0.45 —
   * 0.45 composites to #72706A = 3.9:1 and fails AA. This measures 5.3:1. */
  --ahead-opacity: 0.55;
  --ahead: rgba(237, 232, 223, 0.55);

  /* 1.5 pt ring on every face and photo frame. Brand card stroke at 10%. */
  --hairline: rgba(237, 232, 223, 0.1);
  --hairline-width: 1.5px;
  /* The hidden panel's own 1 pt stroke (§8.2). */
  --panel-stroke: rgba(237, 232, 223, 0.08);

  /* The band's two ends. The peak is made of alpha and bloom, never a second
   * warm hex — a second warm colour would break "one warm colour". */
  --band-alpha-dim: 0.28;   /* asleep. 1.9:1, carries no information */
  --band-alpha-floor: 0.6;  /* the lowest alpha any meaning-bearing state uses */
  --band-alpha-bright: 1;

  /* Brand material at 0.035, not the brand's 0.05: this ground runs at maximum
   * brightness behind 34 pt+ glyphs and visible noise subtracts from effective
   * contrast, which is the whole budget here. Grain never over content. */
  --grain-opacity: 0.035;

  /* ── §3 type ──────────────────────────────────────────────────────────── */

  /* SF Pro for everything read as language. SF Pro Rounded ONLY for the day and
   * the time — the brand reserves Rounded for the wordmark and the Ring's
   * status words, and the clock is the only furniture that speaks in that
   * register. SF Mono is operator-only. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* THE ONE KNOB (§3.1). Multiplies every size below. Raising it is a
   * deliberate manual change after we have met him, not an adaptive system.
   * Two values depend on it and move with it by hand — the standby face
   * diameter (110 − 8 − 34s) and the photo frame height (152 − 40(s−1)) — and
   * both live in screen.js, not here. §3.3 gives the table. */
  --type-scale: 1;
  /* Nothing on the product surface goes below this. */
  --type-floor: calc(22px * var(--type-scale));

  /* Line box = the reserved layout height, not the font's natural leading. */
  --said-size: calc(46px * var(--type-scale));
  --said-line: calc(55px * var(--type-scale));
  --said-tracking: -0.6px;
  --said-weight: 700;

  --empty-size: calc(40px * var(--type-scale));
  --empty-line: calc(48px * var(--type-scale));

  --caption-size: calc(34px * var(--type-scale));
  --caption-line: calc(40px * var(--type-scale));
  --caption-tracking: -0.4px;

  --message-size: calc(34px * var(--type-scale));
  --message-line: calc(42px * var(--type-scale));

  --time-size: calc(34px * var(--type-scale));
  --time-line: calc(40px * var(--type-scale));

  --name-big-size: calc(34px * var(--type-scale));
  --name-big-line: calc(40px * var(--type-scale));
  --name-small-size: calc(28px * var(--type-scale));
  --name-small-line: calc(34px * var(--type-scale));
  /* Names are rendered at 34 and SCALED to 0.8235 in standby, never
   * re-typeset: animating a font size re-lays-out every frame and the text
   * jitters, while scaling a rasterised glyph down is stable and stays crisp. */
  --name-standby-scale: 0.8235;
  --name-tracking: -0.4px;

  --day-size: calc(26px * var(--type-scale));
  --day-line: calc(32px * var(--type-scale));

  --waiting-size: calc(24px * var(--type-scale));
  --waiting-line: calc(30px * var(--type-scale));

  /* Operator-only, below the 22 pt floor DELIBERATELY: read by us, at 30 cm,
   * holding the phone on purpose. They live only inside the hidden panel. */
  --op-label-size: 13px;
  --op-value-size: 17px;
  --op-stamp-size: 11px;

  /* ── §1, §4, §5 geometry that both the screen and the band need ───────── */

  /* Not from the 8 pt spacing scale — derived: band centreline 14 pt in, the
   * crest swings 11 pt outward, 3 pt of clearance for the deepest trough.
   * 14 + 11 + 3 = 28. If the band's amplitude ceiling changes, this moves. */
  --content-inset-x: 28px;
  --content-height: 334px;
  /* The bottom slot: the faces in standby, the words in reaching, the hidden
   * panel when it is open. There is no third arrangement. */
  --slot-top: 224px;
  --slot-height: 110px;
  --photo-frame-height: calc(152px - 40px * (var(--type-scale) - 1));
  --photo-radius: 24px;    /* FRadius.card */
  --sheet-radius: 32px;    /* FRadius.sheet — the band path and the strip */

  /* ── §6 the band, so Sources/Light's web twin types no literal twice ──── */
  --band-centreline-inset: 14px;   /* the line the wave oscillates about */
  --band-amplitude-ceiling: 11px;  /* crest 3 pt from the Panel edge */
  --band-core-stroke: 3.5px;
  --band-bloom-outer: 22px;        /* the brand Ring's own recipe, 22 / 9 / core */
  --band-bloom-inner: 9px;

  /* ── §7 motion. Every animation in the app is in §7's table; there are no
   * others. CSS has no spring, so the two springs are transcribed as their
   * measured settling time with a no-overshoot curve — «контент не баунсится»
   * makes that a faithful substitution rather than a lossy one. */
  --morph: 500ms cubic-bezier(0.32, 0.72, 0.24, 1);   /* spring(0.5, 0.86) */
  --snap: 280ms cubic-bezier(0.4, 0.8, 0.3, 1);       /* spring(0.28, 1.0) */
  --press-in: 90ms ease-out;
  --press-out: 300ms cubic-bezier(0.2, 0.9, 0.3, 1);  /* spring(0.3, 0.8) */
  --read-along: 120ms ease-in-out;
  --said-replace: 200ms ease-in-out;
  --crossfade: 300ms ease-in-out;                     /* Reduce Motion */
}