/*
 * Design tokens: the Rovelia palette, type and shape.
 *
 * Colours come from the brand banner: violet #793CFB (buttons, active
 * states, accents), lime #D7FC6E and lavender #C1A3FF on a light warm grey.
 * Black is kept for text only. Every text colour below passes
 * WCAG AA (4.5:1) on both white and the page ground.
 */

:root {
  /* Brand */
  --violet: #793CFB;
  --violet-ink: #5B1FD6;      /* violet text on light surfaces, button hover */
  --violet-soft: #F1EBFF;     /* tinted backgrounds, badges */
  --lavender: #C1A3FF;
  --on-violet-muted: #EDE5FF; /* secondary text on violet */
  --lime: #D7FC6E;
  --lime-soft: #EEFDC9;
  --lime-ink: #2F6B00;
  --chili: #E5484D;           /* spice peppers */

  /* Neutrals */
  --ink: #141414;
  --text: #141414;
  --text-muted: #5E5E66;
  --ground: #F2F1EE;          /* page background */
  --surface: #FFFFFF;         /* cards */
  --surface-hover: #FAFAF8;
  --line: #ECEBE7;
  --line-strong: #DAD8D2;
  --track: #E2E0DB;

  /* Status */
  --amber-soft: #FFF1D6;
  --amber-ink: #7A4A00;
  --green-dot: #2F9E44;
  --green-ink: #2B6E35;
  --red: #B42318;
  --red-soft: #FEF3F2;
  --gray-soft: #F2F1EE;

  /* Type */
  --font-display: 'Rovelia Rounded', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  /* Shape */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --pill: 999px;
  --gap: 16px;
  --control-h: 44px;          /* minimum touch target */
}