/* Familiar colour tokens — from design/familiar/tokens.json, plus the marketing site's deeper grounds (site/public/assets/base.css). */
:root {
  /* Surfaces: four near-black greys. Elevation = a lighter grey, never a border. */
  --void: #070708;         /* Marketing site ground only. Deeper than bg. */
  --bg: #0e0e0e;           /* The ground. Every app screen. */
  --bg-raised: #161616;    /* One step up: drawers, cards, input fields. */
  --bg-elevated: #1f1f1f;  /* Two steps up: bubbles, sheets, menus, progress tracks. */
  --bg-hover: #2a2a2a;     /* Pressed/hovered rows and buttons. */
  --glass: rgba(14, 14, 14, 0.72); /* Floating top bar, always with blur-glass. */
  --scrim: rgba(0, 0, 0, 0.6);
  --island: #000000;       /* Dynamic Island fill only. The one true black. */

  /* Lines */
  --line: #262626;         /* Decorative hairlines only. */
  --line-strong: #767676;  /* Borders that carry meaning. ≥3.6:1 everywhere. */

  /* Ink */
  --ink: #f2f2f2;
  --ink-secondary: #a3a3a3;
  --ink-tertiary: #8a8a8a;

  /* The one accent: neon purple */
  --neon: #8b4bfa;          /* FILL only: primary buttons, voice orb, progress fills. Never text. */
  --neon-ink: #a884ff;      /* Accent text and icons. 6.8:1 on bg. */
  --neon-soft: #22153d;     /* Tinted ground behind neon-ink: chips, badges, selected segment. */
  --neon-pressed: #7a3de6;
  --neon-glow: rgba(139, 75, 250, 0.35); /* Halo colour inside shadow-glow; never a fill behind text. */
  --neon-deep: #7a2cff;     /* Site/splash halos and gradient ends. */
  --neon-light: #d9c2ff;    /* Wordmark neon-tube ink; egg highlight. */
  --on-neon: #ffffff;       /* Text on a neon fill. 4.7:1. */

  /* Status */
  --success: #5ad38f;
  --danger: #ff7070;
  --fill-muted: #4a4a4a;

  /* Logo's own colours — not for UI, listed for reference. Never recolour the fox. */
  --logo-fox-face: #8e3fef;
  --logo-fox-shadow: #5321a8;
  --logo-fox-muzzle: #dbaffe;

  /* Semantic aliases */
  --surface-page: var(--bg);
  --surface-card: var(--bg-raised);
  --surface-bubble: var(--bg-elevated);
  --surface-sheet: var(--bg-elevated);
  --surface-input: var(--bg-raised);
  --surface-selected: var(--neon-soft);
  --text-body: var(--ink);
  --text-muted: var(--ink-secondary);
  --text-quiet: var(--ink-tertiary);
  --text-accent: var(--neon-ink);
  --text-on-accent: var(--on-neon);
  --action-primary: var(--neon);
  --action-primary-pressed: var(--neon-pressed);
  --border-decorative: var(--line);
  --border-control: var(--line-strong);
  --focus-ring: var(--neon-ink);
}