/* ── Mauvely colour system ───────────────────────────────────────────────
   Five ramps from the brand board: Violet (PRIMARY brand, interactive), Mauve (accent /
   supporting), Indigo (app ground / dark theme), Teal (bright signal — LOCKED,
   never re-hued), Slate (neutral text + greys).
   Semantic aliases below are what product code should consume. */
:root{
  /* Mauve · accent (was primary before the v1.1 swap) */
  --mauve-50:#faf6fb; --mauve-100:#f2eaf4; --mauve-200:#e2d2e6; --mauve-300:#cbb0d1;
  --mauve-400:#ac89b6; --mauve-500:#886193; --mauve-600:#6f4e79; --mauve-700:#5b4063;
  --mauve-800:#4a3651; --mauve-900:#3d2d43; --mauve-950:#281c2d;

  /* Violet · PRIMARY brand, interactive */
  --violet-50:#f9f9ff; --violet-100:#f0eefe; --violet-200:#e7e5fe; --violet-300:#d2cefd;
  --violet-400:#b5abfc; --violet-500:#968ae0; --violet-600:#796cbf; --violet-700:#5d5294;
  --violet-800:#423a6a; --violet-900:#2b2741; --violet-950:#1a1728;

  /* Indigo · app ground, dark theme */
  --indigo-50:#f2f3fb; --indigo-100:#e2e4f5; --indigo-200:#c5c9ea; --indigo-300:#9ea4d6;
  --indigo-400:#6f78bd; --indigo-500:#4c5397; --indigo-600:#353b80; --indigo-700:#2b2f68;
  --indigo-800:#262a60; --indigo-900:#1c1f47; --indigo-950:#12142e;

  /* Teal · bright accent, signal */
  --teal-50:#e6fbf9; --teal-100:#c1f5f0; --teal-200:#8aeae2; --teal-300:#49d9cf;
  --teal-400:#17c6bb; --teal-500:#0fb3a8; --teal-600:#0d938b; --teal-700:#0f736d;
  --teal-800:#115a56; --teal-900:#123f3c; --teal-950:#082523;

  /* Slate · neutral, text + greys */
  --slate-50:#f8f9fd; --slate-100:#f3f5fe; --slate-200:#e4e7f5; --slate-300:#cfd3e5;
  --slate-400:#b2b6ca; --slate-500:#9397ab; --slate-600:#75798c; --slate-700:#595d6c;
  --slate-800:#3f424d; --slate-900:#292b31; --slate-950:#161826;

  /* Derived status hues — NOT in the brand board. Tuned to sit beside mauve/violet.
     Success reuses brand teal. Replace if brand defines its own. */
  --danger-100:#fdecf0; --danger-500:#d94f6f; --danger-600:#b93c59;
  --warning-100:#fdf1de; --warning-500:#e8a33d; --warning-600:#c9852a;
  --success-100:var(--teal-100); --success-500:var(--teal-600); --success-600:var(--teal-700);

  /* Shadow ink (rgb triplet, mauve-black) */
  --ink-rgb:40,28,45; /* @kind other */

  /* ── Semantic · light (default) ────────────────────────────────── */
  --bg-page:#eceaf0;
  --bg-page-alt:var(--slate-100);
  --surface-card:#ffffff;
  --surface-raised:#ffffff;
  --surface-sunken:var(--slate-100);
  --surface-inset:var(--mauve-50);
  --surface-code:var(--slate-950);

  --border-subtle:rgba(40,28,45,0.07);
  --border-hairline:rgba(40,28,45,0.04);
  --border-strong:var(--slate-300);

  --text-strong:var(--slate-900);
  --text-body:var(--slate-800);
  --text-muted:var(--slate-600);
  --text-faint:var(--slate-500);
  --text-quiet:var(--slate-400);
  --text-on-primary:#ffffff;
  --text-on-accent:#ffffff;
  --text-link:var(--violet-600);
  --text-link-hover:var(--violet-700);

  /* Identity anchor: violet-500 is the brand colour for wordmarks and large
     colour fields. Filled controls step to 600 so white labels stay legible. */
  --brand:var(--violet-500);
  --primary:var(--violet-600);
  --primary-hover:var(--violet-700);
  --primary-active:var(--violet-800);
  --primary-soft:var(--violet-100);
  --primary-soft-hover:var(--violet-200);
  --primary-text:var(--violet-700);

  --accent:var(--mauve-500);
  --accent-hover:var(--mauve-600);
  --accent-soft:var(--mauve-100);
  --signal:var(--teal-500);
  --signal-hover:var(--teal-600);
  --signal-soft:var(--teal-100);

  --focus-ring:rgba(121,108,191,0.45);
  --selection-bg:var(--violet-200);
}

/* ── Semantic · dark (the app ground from the brand board) ──────────── */
[data-theme="dark"]{
  --bg-page:var(--slate-950);
  --bg-page-alt:#1b1d2b;
  --surface-card:#232532;
  --surface-raised:#2b2d3c;
  --surface-sunken:#12142e;
  --surface-inset:rgba(150,138,224,0.08);
  --surface-code:#12142e;

  --border-subtle:rgba(233,233,237,0.08);
  --border-hairline:rgba(233,233,237,0.05);
  --border-strong:rgba(233,233,237,0.18);

  --text-strong:#e9e9ed;
  --text-body:var(--slate-300);
  --text-muted:var(--slate-500);
  --text-faint:var(--slate-600);
  --text-quiet:var(--slate-700);
  --text-on-primary:var(--violet-950);
  --text-on-accent:var(--violet-950);
  --text-link:var(--violet-400);
  --text-link-hover:var(--violet-300);

  --brand:var(--violet-400);
  --primary:var(--violet-400);
  --primary-hover:var(--violet-300);
  --primary-active:var(--violet-500);
  --primary-soft:rgba(181,171,252,0.14);
  --primary-soft-hover:rgba(181,171,252,0.22);
  --primary-text:var(--violet-400);

  --accent:var(--mauve-400);
  --accent-hover:var(--mauve-300);
  --accent-soft:rgba(203,176,209,0.16);
  --signal:var(--teal-400);
  --signal-hover:var(--teal-300);
  --signal-soft:rgba(15,179,168,0.16);

  --ink-rgb:8,6,16; /* @kind other */
  --focus-ring:rgba(181,171,252,0.55);
  --selection-bg:rgba(150,138,224,0.35);
}