/* =========================================================
   Doxo design system: shared tokens
   One source of truth for the homepage and every app page.
   Loaded by app/_home/home.html and app/layout.tsx.
   ========================================================= */

:root {
  --fg: #18181b;
  --fg-2: #27272a;
  --muted: #52525b;
  --muted-2: #71717a;
  --muted-3: #a1a1aa;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-muted: #f4f4f5;
  --secondary: rgba(0, 0, 0, 0.04);
  --secondary-2: rgba(0, 0, 0, 0.06);
  --border: rgba(0, 0, 0, 0.08);
  --border-2: rgba(0, 0, 0, 0.05);
  --dark: #0b0a0a;
  --on-dark: #fafafa;
  --accent: #3b82f6;
  --accent-soft: #e8f0fe;
  --accent-ink: #1d4ed8;
  --green: #16a34a;
  --green-soft: #dcfce7;
  --amber: #b45309;
  --amber-soft: #fef3c7;
  --red: #dc2626;
  --red-soft: #fee2e2;
  --wa: #25d366;
  --wa-bubble: #dcf8c6;
  --wa-bg: #efeae2;
  --quick: #dde8f3;
  --qs-step: rgba(255,255,255,.55);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.03), 0 24px 60px -20px rgba(0, 0, 0, 0.18);
  --font: "Inter", "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --container: 1152px;
  --container-wide: 1280px;
  --header-h: 72px;

  /* Solid neutrals for app surfaces */
  --border-solid: #e4e4e7;
  --muted-4: #d4d4d8;
  --warn: #d97706;

  /* Surfaces */
  --surface: #ffffff;
  --ink: #0b0a0a;
  --ws-left: #e3e6eb;
  --header-bg: rgba(255, 255, 255, 0.88);
  --map-fade-1: rgba(255, 255, 255, 0.68);
  --map-fade-2: rgba(246, 248, 250, 0.54);

  /* Dark panels (same charcoal as the homepage footer) */
  --panel-dark-top: #393737;
  --panel-dark-bottom: #1b1b1b;
}

/* Dark theme: the homepage switch in the footer sets data-theme="dark" on <html>.
   Light is the default. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fg: #fafafa;
  --fg-2: #e4e4e7;
  --muted: #a1a1aa;
  --muted-2: #8e8e97;
  --muted-3: #6b6b73;
  --bg: #0c0c0e;
  --bg-soft: #141417;
  --bg-muted: #1c1c20;
  --secondary: rgba(255, 255, 255, 0.06);
  --secondary-2: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.1);
  --border-2: rgba(255, 255, 255, 0.06);
  --dark: #fafafa;
  --on-dark: #0b0a0a;
  --accent-soft: rgba(96, 165, 250, 0.16);
  --accent-ink: #93c5fd;
  --green: #4ade80;
  --green-soft: rgba(74, 222, 128, 0.14);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.14);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.14);
  --quick: #1a2330;
  --qs-step: rgba(255,255,255,.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --border-solid: #2a2a30;
  --muted-4: #3f3f46;
  --surface: #16161a;
  --ws-left: #1d1d22;
  --header-bg: rgba(12, 12, 14, 0.85);
  --map-fade-1: rgba(12, 12, 14, 0.6);
  --map-fade-2: rgba(20, 20, 23, 0.5);
}