/* The brand, ported from the live diito.it. CLAUDE.md is the authority and fixes
 * four of these: #FF3D00 primary (--red), #888888 secondary (--mark-grey),
 * #0C0C0D foreground (--ink), and the cream ground #F5F3EE (--cream) the whole
 * product sits on rather than white. Everything else here is the supporting
 * palette this site needs and that file does not fix.
 *
 * The secondary grey is two values, not one, and CLAUDE.md's brand line records
 * the split — so this file inherits it rather than deciding it. --mark-grey keeps
 * #888888 exactly, because the wordmark is a logo and out of scope for the text
 * contrast rule. Secondary *text* is --label (#6f6a61). That fixes the live site,
 * where #888888 at 12px is 3.2:1 on cream and the #9a958a footer grey is 2.7:1 —
 * both fail WCAG AA, and the letter-spaced grey eyebrow is the brand's signature
 * type gesture, so it could not just be dropped. #6f6a61 is 4.8:1 and visually
 * near-identical at that size. app/src/theme/colors.ts ports these same values,
 * so the client and the site are one system rather than two readings of it.
 *
 * No dark mode: the brand sits on cream rather than white, which an inversion
 * fights, and diito.it has none. No webfont, so nothing is fetched to render a
 * page — loading any page here reaches no origin but its own, which is the
 * property the splash page already had and the one worth keeping. The waitlist
 * post is same-origin too, so that holds for the form as well as the page.
 */

:root {
  --cream: #f5f3ee;
  --paper: #fffefb;
  --ink: #0c0c0d;
  --body: #555555;
  --label: #6f6a61;
  --rule: #d8d4ca;
  /* The input outline is a UI component boundary, so WCAG 1.4.11 wants 3:1
   * against the field fill. --rule is 1.5:1 there — fine for a decorative
   * hairline, invisible as a control edge — so the field gets its own value at
   * 3.5:1. Section dividers and card edges keep --rule: they are decorative, and
   * every one of them is backed by a label or a heading. */
  --field: #8f8776;
  --red: #ff3d00;
  --mark-grey: #888888;
  --tint-bg: rgba(255, 61, 0, 0.07);
  --tint-br: rgba(255, 61, 0, 0.35);

  /* The mirror card is the one raised object on the page, so it is the only
   * thing with a shadow. */
  --lift: 0 1px 2px rgba(12, 12, 13, 0.04), 0 10px 30px rgba(12, 12, 13, 0.06);

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 10px;
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 66ch;
}