/* Design tokens. Every colour, radius and font in the app shell and the
   component layer reads from here; dark mode flips the same names. */
:root {
  --sky: #0095D9;
  --sky-deep: #0B6FA4;
  --sky-soft: #DBF0FB;
  --sky-tint: #F2F9FD;
  --sky-rgb: 0, 149, 217;

  /* Kazakhstan flag, used by the holiday header */
  --kz-sky: #00AFCA;
  --kz-sky-deep: #0097AF;
  --kz-gold: #FEC50C;
  --kz-text: #FFFFFF;
  --kz-line: rgba(255, 255, 255, .4);

  --ink: #0F172A;
  --ink-2: #334155;
  --ink-3: #64748B;
  --ink-4: #94A3B8;

  --line: #E2E8F0;
  --line-soft: #F1F5F9;
  --line-card: #CBD5E1;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, .08);
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --card-head: #F7F9FC;
  --hover: #F1F5F9;
  --overlay: rgba(15, 23, 42, .45);

  --green: #16A34A;
  --green-soft: #DCFCE7;
  --green-text: #15803D;
  --red: #D9534F;
  --red-soft: #FDECEC;
  --red-text: #C9302C;
  --amber: #D97706;
  --amber-soft: #FEF3C7;
  --amber-text: #B45309;
  --info: #0891B2;
  --info-soft: #CFFAFE;
  --info-text: #0E7490;
  --violet: #4F46E5;
  --violet-soft: #EEF2FF;

  --r: 10px;
  --r-sm: 6px;
  --r-pill: 999px;
  --sb: 56px;
  --header-h: 56px;

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .12);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, .25);
}

html.theme-dark {
  --sky: #4DB2FF;
  --sky-deep: #2B9FF0;
  --kz-sky: #0A8FA6;
  --kz-sky-deep: #077A8E;
  --sky-soft: rgba(77, 178, 255, .18);
  --sky-tint: rgba(77, 178, 255, .08);
  --sky-rgb: 77, 178, 255;

  --ink: #E6E9F2;
  --ink-2: #C8CFDB;
  --ink-3: #9AA3B2;
  --ink-4: #6F7A8C;

  --line: rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .08);
  --line-card: rgba(255, 255, 255, .18);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .5);
  --bg: #0F1117;
  --card: #141A24;
  --card-head: #181F2B;
  --hover: #1B2230;
  --overlay: rgba(0, 0, 0, .6);

  --green: #3DDC97;
  --green-soft: rgba(61, 220, 151, .18);
  --green-text: #3DDC97;
  --red: #FF6B6B;
  --red-soft: rgba(255, 107, 107, .18);
  --red-text: #FF6B6B;
  --amber: #FFBF4D;
  --amber-soft: rgba(255, 191, 77, .18);
  --amber-text: #FFBF4D;
  --info: #67D1E1;
  --info-soft: rgba(103, 209, 225, .18);
  --info-text: #67D1E1;
  --violet: #A5B4FC;
  --violet-soft: rgba(99, 102, 241, .18);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
}