/* Design tokens: colours, surfaces, control sizes and radii. Dark by default, light via data-theme. */
:root {
  /* surfaces */
  --bg: #0b0d12;
  --bg-grad: radial-gradient(1200px 600px at 20% -10%, #1d2436 0%, #0b0d12 62%);
  --panel: #161a22;
  --panel-2: #1e232d;
  --panel-3: #28303d;
  --border: #333b4b;
  --border-soft: #252b37;
  --border-2: #414b63;

  /* text */
  --text: #f1f4f9;
  --muted: #9aa4ba;
  --faint: #69738d;

  /* brand + semantic */
  --accent: #6c8cff;
  --accent-2: #4f6ef7;
  --accent-soft: rgba(108, 140, 255, .14);
  --doing: #c08cff;
  --high: #ff6b6b;
  --medium: #ffb454;
  --low: #4fd18b;
  --star: #ffd166;
  --mark: rgba(255, 209, 102, .28);
  --ring: rgba(108, 140, 255, .35);

  /* elevation */
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, .55);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, .04);

  /* control heights: every button/input/select uses one of these */
  --h-xs: 24px;
  --h-sm: 28px;
  --h-md: 36px;
  --h-lg: 42px;

  /* radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa4ba' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --ease: cubic-bezier(.2, .8, .2, 1);
  --topbar-h: 56px;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #e9edf6;
  --bg-grad: radial-gradient(1200px 600px at 20% -10%, #ffffff 0%, #e7ecf5 62%);
  --panel: #ffffff;
  --panel-2: #f2f5fb;
  --panel-3: #e5eaf4;
  --border: #cbd3e2;
  --border-soft: #dbe1ec;
  --border-2: #b3bdd1;
  --text: #0f1421;
  --muted: #57607a;
  --faint: #8891a8;
  --accent: #4f6ef7;
  --accent-2: #3b5bf0;
  --accent-soft: rgba(79, 110, 247, .1);
  --doing: #8b5cf6;
  --high: #e5484d;
  --medium: #e08b18;
  --low: #1f9e63;
  --star: #e0a30f;
  --mark: rgba(224, 163, 15, .28);
  --ring: rgba(79, 110, 247, .28);
  --shadow: 0 14px 40px rgba(30, 40, 80, .16);
  --shadow-sm: 0 4px 16px rgba(30, 40, 80, .1);
  --shadow-lg: 0 24px 56px rgba(30, 40, 80, .22);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, .9);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2357607a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  color-scheme: light;
}