/* Design tokens — light theme by default, dark via [data-theme="dark"]. */
/* Whitelabel overrides --accent* via inline <style id="wl-vars">.        */

:root {
  /* surfaces */
  --bg: #FBFAF7;
  --bg-elev: #FFFFFF;
  --bg-sunk: #F4F2EC;
  --bg-tinted: #FFFBEC;
  --bg-tinted-2: #FFF7DC;

  /* ink */
  --ink: #14130F;
  --ink-2: #2F2D27;
  --ink-3: #57544B;
  --ink-4: #87837A;
  --ink-5: #B8B4A8;

  /* lines */
  --line: #EBE7DD;
  --line-2: #DDD8CB;
  --line-3: #CFC9B8;

  /* accent — overridden per-tenant via whitelabel */
  --accent: #F5C518;
  --accent-deep: #C99C0D;
  --accent-soft: #FFE799;
  --accent-wash: #FFF4C9;

  /* semantic */
  --good: #2F7A4D;
  --good-soft: #DCEFE0;
  --warn: #B6741A;
  --warn-soft: #FBEACD;
  --bad: #B4413A;
  --bad-soft: #F6D9D5;
  --info: #2F5C9A;
  --info-soft: #DFE7F4;

  /* type */
  --font-sans: var(--brand-font, "Geist", "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif);
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* shadows */
  --sh-1: 0 1px 0 rgba(20,19,15,.04), 0 1px 2px rgba(20,19,15,.04);
  --sh-2: 0 2px 6px rgba(20,19,15,.05), 0 8px 24px rgba(20,19,15,.06);
  --sh-3: 0 18px 60px -20px rgba(20,19,15,.18), 0 4px 12px rgba(20,19,15,.06);

  /* density */
  --row-h: 44px;
  --pad-x: 24px;

  /* breakpoints (used via media + container queries) */
  --bp-sm: 640px;
  --bp-md: 960px;
  --bp-lg: 1280px;
}

[data-theme="dark"] {
  --bg: #0F0E0C;
  --bg-elev: #161513;
  --bg-sunk: #0A0908;
  --bg-tinted: #1A1808;
  --bg-tinted-2: #221E0A;

  --ink: #F4F1E8;
  --ink-2: #DCD8CB;
  --ink-3: #ADA89A;
  --ink-4: #7E7969;
  --ink-5: #565244;

  --line: #28251E;
  --line-2: #34302A;
  --line-3: #45403A;

  --accent-soft: #4B3D0E;
  --accent-wash: #2A2308;

  --good-soft: #14291C;
  --warn-soft: #2E230D;
  --bad-soft: #2E1410;
  --info-soft: #102338;

  --sh-1: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --sh-3: 0 18px 60px -20px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}