/* SimplePractice — UI theme tokens (light / dark).
   These style the app CHROME only (navbars, cards, menus, dashboards).
   Slides are brand content and always render in their designed colors.

   Light: white + light grays, SimplePractice accents (Forest ink, Sun CTAs).
   Dark:  neutral dark grays, SimplePractice accents on top. */

:root {
  --ui-bg: #FFFFFF;            /* page background */
  --ui-bg-accent: #F6F6F6;     /* tinted section background */
  --ui-surface: #FFFFFF;       /* navbar, cards, menus */
  --ui-text: #123333;          /* Forest ink */
  --ui-text-2: #5A6B6B;
  --ui-muted: #8C9A9A;
  --ui-border: #E2E2E2;
  --ui-border-soft: #EFEFEF;
  --ui-hover: #F2F2F2;
  --ui-danger-bg: #FDEFEF;
  --ui-danger-text: #8B4D4D;
  --ui-shadow: 0 16px 40px rgba(18, 51, 51, 0.12);
  --ui-backdrop: rgba(18, 51, 51, 0.55);
  --ui-canvas: #EAEAEA;          /* deck letterbox behind slides */
  --ui-rail-edge: rgba(0, 0, 0, 0.10);   /* slide-thumb edge on the rail */
  --ui-rail-dim: rgba(0, 0, 0, 0.35);    /* hover outlines / scrollbars */
  --ui-rail-dim-strong: rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] {
  --ui-bg: #141414;
  --ui-bg-accent: #1A1A1A;
  --ui-surface: #1F1F1F;
  --ui-text: #F5F5F5;
  --ui-text-2: #C9C9C9;
  --ui-muted: #8A8A8A;
  --ui-border: #3A3A3A;
  --ui-border-soft: #2A2A2A;
  --ui-hover: #2C2C2C;
  --ui-danger-bg: #3A2222;
  --ui-danger-text: #FE9A9A;
  --ui-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  --ui-backdrop: rgba(0, 0, 0, 0.65);
  --ui-canvas: #111111;
  --ui-rail-edge: transparent;
  --ui-rail-dim: rgba(255, 255, 255, 0.25);
  --ui-rail-dim-strong: rgba(255, 255, 255, 0.5);
}

/* Theme toggle button (shared) */
.sp-theme-toggle .i-sun { display: none; }
.sp-theme-toggle .i-moon { display: inline-flex; }
[data-theme="dark"] .sp-theme-toggle .i-sun { display: inline-flex; }
[data-theme="dark"] .sp-theme-toggle .i-moon { display: none; }