/* Formidable design tokens: the one source of the brand's colours, type and sky, shared by the
   website (linked before /home/home.css) and the app's React screens (imported by web/src).
   Values were read from the approved landing page (docs/design/DESIGN_DIRECTION.md). Change a
   token here and both surfaces follow; tools/design/tokens.test.ts refuses a stylesheet that
   declares one of these names again, so the two can never drift apart. Fonts are not declared
   here because each surface serves the same font files from its own origin. */
:root {
  /* Night sky to sunrise, from the app icon. */
  --night: #060918;
  --night-2: #0c1030;
  --indigo: #1a1950;
  --violet: #3a2a6e;
  --neon: #6f9bff;
  --neon-core: #e4ebff;
  --ember: #ff6a2a;
  --ember-hi: #ffa255;

  /* Text and surfaces on dark. --dim stays at least 4.5:1 on --night for 13 px meta text. */
  --text: #eef0fb;
  --muted: rgba(228, 232, 255, .76);
  --dim: #a2a8cc;
  --line: rgba(160, 172, 255, .15);
  --card: rgba(16, 19, 52, .55);

  /* Graphite product surfaces (the bubble and its round controls). */
  --graphite: rgba(28, 28, 32, .9);
  --graphite-control: rgba(28, 28, 32, .94);

  /* Type. Headings use Manrope at 650 with tight tracking; body text uses the system font. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "DM Sans", sans-serif;
  --display-manrope: "Manrope", "DM Sans", sans-serif;
  --display-manrope-weight: 650;
  --display-manrope-track: -.04em;

  /* The approved ("vivid") sky, top to bottom, with its violet glow at the top centre. */
  --sky-0: #090c32;
  --sky-1: #13185a;
  --sky-2: #2a2278;
  --sky-3: #582383;
  --sky-4: #9f2c7b;
  --sky-5: #e04f5e;
  --sky-6: #ff985a;
  --sky-7: #ffc98e;
  --sky-glow: rgba(150, 125, 255, .62);
  --sky-ink: #3a1224;
}