/* aeons design tokens: the single source of truth for colour, type, layout
   and motion. Every stylesheet and generated page loads this first.
   Keep names in step with the Figma variables.

   Breakpoints cannot be custom properties inside media queries, so they are
   recorded here and written literally: 1000px (tablet) and 600px (mobile).
   Email templates (src/templates) inline their colours and do not read this. */

:root {
  color-scheme: dark;

  /* ── surfaces, darkest first ── */
  --void: #080B10;            /* page */
  --well: #0B0E14;            /* input well */
  --well-focus: #0D1018;      /* input well, focused */
  --raised: #11141A;          /* raised panels, code */
  --trace: #181B22;           /* faint rules */
  --graphite: #2A2D35;        /* rules and borders */
  --graphite-hi: #3A3E49;     /* button and hover borders */
  --graphite-focus: #4A4757;  /* focused field border */

  /* ── text ── */
  --placeholder-dim: #5E5B68; /* archive search placeholder */
  --placeholder: #6F6B7C;
  --mineral: #8A8894;         /* secondary text */
  --atmosphere: #8398A3;      /* metadata */
  --haze: #9BAEB8;            /* labels and kickers */
  --lunar-dim: #C4C0B5;
  --lunar-soft: #E4DFD4;      /* long-form body copy */
  --lunar: #ECE8DE;           /* primary text */
  --lunar-headline: #F2EEE4;
  --lunar-display: #F4F0E7;   /* inscriptions, display headings */

  /* ── accent ── */
  --ion-deep: #8C86D8;        /* end of the button fill gradient */
  --ion: #9A93E6;
  --ion-hi: #B3ACF0;          /* emphasis and hover */
  --ion-pale: #C9C3EF;

  /* ── status ── */
  --error: #D98B7E;

  /* ── channels, for translucent tints: rgb(var(--ion-rgb) / 0.1) ── */
  --shadow-rgb: 4 6 10;
  --void-rgb: 8 11 16;
  --raised-rgb: 17 20 26;
  --trace-rgb: 24 27 34;
  --graphite-rgb: 42 45 53;
  --atmosphere-rgb: 131 152 163;
  --mineral-rgb: 138 136 148;
  --ion-rgb: 154 147 230;
  --lunar-rgb: 236 232 222;

  /* ── type ── */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ── layout ── */
  --shell: min(1240px, 92vw);

  /* ── motion ── */
  --ease-signal: cubic-bezier(.22,.61,.36,1);  /* the house ease-out */
}