/* KDS — design tokens. Same token names resolve light or dark by theme.
   A [data-theme="light"] scope re-asserts light values, so a white card can sit
   inside a dark page (the KDS pattern). */
:root,
[data-theme="light"]{
  /* Grey — neutral scale */
  --grey-50:#fafafa;  --grey-100:#f7fafc; --grey-200:#edf2f7; --grey-300:#e2e8f0; --grey-400:#cbd5e0;
  --grey-500:#a0aec0; --grey-600:#718096; --grey-700:#2a313c; --grey-800:#232b38; --grey-900:#1a202c;
  /* Text — on light surfaces */
  --text-200:#8a95a3; --text-300:#3c4f65; --text-400:#23364c; --text-500:#10243c;
  /* System — Green (success) */
  --green-200:#dffbf0; --green-500:#2cb16d;
  /* System — Red (error) */
  --red-200:#fff5f5; --red-500:#ff4747;
  /* System — Orange (warning) */
  --orange-200:#fff5eb; --orange-500:#fd9c3f;
  /* System — Blue (primary / info) */
  --blue-200:#ebf3ff; --blue-500:#3f8dfd; --blue-800:#1a2f4b;
  /* White — surface */
  --white-200:#fbfbfb; --white-500:#ffffff;
  /* System — accents */
  --brown-500:#9e6a47;
  --cyan-500:#00c9bd;
  --purple-200:#ebecff; --purple-500:#862ed8;
  --pink-main:#7C93FF;  /* global "Pink Main" — input/select hover & focus accent */
}
[data-theme="dark"]{
  /* Grey — inverted for dark surfaces */
  --grey-50:#1a2f4b;  --grey-100:#243b5a; --grey-200:#2d4669; --grey-300:#3e5677; --grey-400:#5f7694;
  --grey-500:#8295ad; --grey-600:#a3b3c7; --grey-700:#c5d0de; --grey-800:#e2e8f0; --grey-900:#f7fafc;
  /* Text — on dark surfaces */
  --text-200:#718096; --text-300:#a0aec0; --text-400:#e2e8f0; --text-500:#ffffff;
  /* System — Green (success) */
  --green-200:#1e3d2f; --green-500:#42d68c;
  /* System — Red (error) */
  --red-200:#442323; --red-500:#ff5c5c;
  /* System — Orange (warning) */
  --orange-200:#453526; --orange-500:#fd9c3f;
  /* System — Blue (primary / info) */
  --blue-200:#1e3a5f; --blue-500:#3f8dfd; --blue-800:#1a2f4b;
  /* White — surface (inverts to dark navy) */
  --white-200:#23364c; --white-500:#10243c;
  /* System — accents */
  --brown-500:#c5966f;
  --cyan-500:#00e6d9;
  --purple-200:#322345; --purple-500:#9d50e6;
  --pink-main:#7C93FF;  /* global "Pink Main" — input/select hover & focus accent */
}