/*
  Dr Sknn UI Theme System
  ----------------------
  Single source of truth for design tokens + theme adapters.

  - Theme selector: :root[data-theme="dark" | "light"] (default: dark)
  - Legacy aliases: keeps existing --drsknn-* variables working
  - Tailwind CDN adapter: remaps common utility classes to semantic tokens
  - Covers: patient/admin/staff portals, modals, toasts, tooltips, embeds
*/

/* =========================
   0) Non-theme primitives
   ========================= */
:root {
  --drsknn-font-display: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;
  --drsknn-font-body: "Montserrat", "Avenir Next", "Gill Sans", "Candara", sans-serif;

  --drsknn-text-xs: 0.72rem;
  --drsknn-text-sm: 0.86rem;
  --drsknn-text-md: 1rem;
  --drsknn-text-lg: 1.2rem;
  --drsknn-text-xl: 1.6rem;
  --drsknn-text-2xl: 2rem;
  --drsknn-text-3xl: 2.6rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;

  --radius-1: 8px;
  --radius-2: 14px;
  --radius-3: 20px;
  --radius-4: 28px;

  --drsknn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --drsknn-ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --drsknn-fast: 140ms;
  --drsknn-medium: 220ms;
  --drsknn-slow: 420ms;

  --drsknn-blur: 12px;
  --drsknn-radius-sm: 10px;
  --drsknn-radius-md: 14px;
  --drsknn-radius-lg: 20px;
  --drsknn-gutter: clamp(16px, 3vw, 32px);

  /* Brand palette primitives (theme-invariant) */
  --drsknn-gold: #c8a74a;
  --drsknn-gold-rgb: 200, 167, 74;
  --drsknn-gold-deep: #b78c3f;
  --drsknn-gold-soft: #f1d28a;
  --drsknn-gold-wash: #ffeec0;

  --drsknn-navy: #0b3c5d;
  --drsknn-navy-rgb: 11, 60, 93;
  --drsknn-navy-deep: #0f2b44;

  --drsknn-graphite: #263041;
  --drsknn-ink-strong: #181818;
  --drsknn-white: #ffffff;

  --drsknn-info: #4285f4;
  --drsknn-star: #f6b01c;
  --drsknn-success: #4caf50;
  --drsknn-warning: #ff9800;
  --drsknn-error: #c84b4b;
  --drsknn-error-rgb: 200, 75, 75;
  --drsknn-error-soft: #f7d1d1;
  --drsknn-purple: #9c27b0;
  --rgb-purple: 156 39 176;

  /* Theme-invariant "on-color" inks for solid fills */
  --rgb-on-accent: 11 26 43; /* navy ink on gold */
  --rgb-on-success: 4 20 15; /* deep ink on success */
  --rgb-on-dark: 255 255 255; /* text/borders on dark brand fills */

  /* Accent/status highlight used for "attention" UI (e.g., scan guard) */
  --rgb-attention: 244 114 182;
  --rgb-danger-strong: 244 63 94;

  /* Brand derivations (theme-invariant) */
  --rgb-navy-bright: 17 74 116;
}

/* =========================
   1) Semantic tokens
   ========================= */

/* Default: dark theme (safe default requested) */
:root:not([data-theme]),
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Core semantic RGB (space-separated; use with rgb(var(--rgb-*) / alpha)) */
  --rgb-bg: 2 6 23; /* app background */
  --rgb-surface: 15 23 42; /* cards */
  --rgb-surface-2: 30 41 59; /* elevated / inset */
  --rgb-surface-3: 51 65 85; /* hover */

  --rgb-text: 248 250 252;
  --rgb-text-2: 226 232 240;
  --rgb-text-muted: 148 163 184;
  --rgb-text-subtle: 100 116 139;
  --rgb-text-inverse: 2 6 23;

  --rgb-border: 51 65 85;
  --rgb-border-strong: 71 85 105;
  --rgb-border-subtle: 30 41 59;

  --rgb-accent: 200 167 74;
  --rgb-accent-soft: 241 210 138;
  --rgb-accent-wash: 255 238 192;
  --rgb-accent-deep: 183 140 63;
  --rgb-navy: 11 60 93;
  --rgb-navy-deep: 15 43 68;

  --rgb-info: 56 189 248;
  --rgb-success: 34 197 94;
  --rgb-success-2: 16 185 129;
  --rgb-warning: 249 115 22;
  --rgb-danger: 248 113 113;

  --rgb-overlay: 0 0 0;
  --overlay-alpha: 0.66;

  --rgb-skeleton-base: 30 41 59;
  --rgb-skeleton-highlight: 51 65 85;

  /* Chart palette (8 series) */
  --rgb-chart-1: 200 167 74; /* gold */
  --rgb-chart-2: 56 189 248; /* sky */
  --rgb-chart-3: 34 197 94; /* green */
  --rgb-chart-4: 244 114 182; /* pink */
  --rgb-chart-5: 129 140 248; /* indigo */
  --rgb-chart-6: 251 191 36; /* amber */
  --rgb-chart-7: 94 234 212; /* teal */
  --rgb-chart-8: 148 163 184; /* slate */

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.4), 0 16px 44px rgba(0, 0, 0, 0.28);
  --shadow-3: 0 1px 0 rgba(0, 0, 0, 0.45), 0 26px 70px rgba(0, 0, 0, 0.34);
  --shadow-4: 0 1px 0 rgba(0, 0, 0, 0.55), 0 34px 92px rgba(0, 0, 0, 0.4);

  /* Legacy/semantic aliases consumed across templates */
  --drsknn-ink: rgb(var(--rgb-text));
  --drsknn-ink-rgb: 248, 250, 252;
  --drsknn-ink-muted: rgb(var(--rgb-text-muted));
  --drsknn-ink-subtle: rgb(var(--rgb-text-subtle));

  --drsknn-text: var(--drsknn-ink);
  --drsknn-text-muted: var(--drsknn-ink-muted);
  --drsknn-text-subtle: var(--drsknn-ink-subtle);
  --drsknn-accent: var(--drsknn-gold);
  --drsknn-accent-ink: var(--drsknn-navy);

  --drsknn-bg0: rgb(var(--rgb-bg));
  --drsknn-bg1: rgb(var(--rgb-surface));
  --drsknn-bg2: rgb(var(--rgb-surface-2));
  --drsknn-paper: rgb(var(--rgb-bg));

  --drsknn-surface: rgb(var(--rgb-surface) / 0.72);
  --drsknn-surface-strong: rgb(var(--rgb-bg) / 0.92);

  --drsknn-border: rgb(var(--rgb-text-muted) / 0.16);
  --drsknn-border-strong: rgb(var(--rgb-text-muted) / 0.24);
  --drsknn-glow: rgba(var(--drsknn-gold-rgb), 0.38);
  --drsknn-glow-soft: rgba(var(--drsknn-gold-rgb), 0.22);
  --drsknn-navy-wash: rgba(var(--drsknn-navy-rgb), 0.14);

  --drsknn-shadow-1: var(--shadow-1);
  --drsknn-shadow-2: var(--shadow-2);
  --drsknn-shadow-3: var(--shadow-3);
  --drsknn-shadow-4: var(--shadow-4);

  /* Inputs */
  --rgb-input-bg: 2 6 23;
  --rgb-input-border: 51 65 85;
  --rgb-input-placeholder: 100 116 139;

  /* Focus ring */
  --rgb-focus: 251 191 36;
  --focus-ring: 0 0 0 3px rgb(var(--rgb-focus) / 0.35);
}

:root[data-theme="light"] {
  color-scheme: light;

  --rgb-bg: 253 247 240;
  --rgb-surface: 255 255 255;
  --rgb-surface-2: 246 238 227;
  --rgb-surface-3: 231 219 201;

  --rgb-text: 11 26 43;
  --rgb-text-2: 34 52 72;
  --rgb-text-muted: 74 83 95;
  --rgb-text-subtle: 123 130 142;
  --rgb-text-inverse: 255 255 255;

  /* Warm, low-contrast borders for light theme (avoid "ink black" outlines) */
  --rgb-border: 186 171 153;
  --rgb-border-strong: 143 126 108;
  --rgb-border-subtle: 214 201 185;

  --rgb-accent: 200 167 74;
  --rgb-accent-soft: 241 210 138;
  --rgb-accent-wash: 255 238 192;
  --rgb-accent-deep: 183 140 63;
  --rgb-navy: 11 60 93;
  --rgb-navy-deep: 15 43 68;

  --rgb-info: 66 133 244;
  --rgb-success: 76 175 80;
  --rgb-success-2: 56 142 60;
  --rgb-warning: 255 152 0;
  --rgb-danger: 200 75 75;

  --rgb-overlay: 11 17 24;
  --overlay-alpha: 0.32;

  --rgb-skeleton-base: 231 219 201;
  --rgb-skeleton-highlight: 246 238 227;

  --rgb-chart-1: 200 167 74;
  --rgb-chart-2: 11 60 93;
  --rgb-chart-3: 76 175 80;
  --rgb-chart-4: 156 39 176;
  --rgb-chart-5: 66 133 244;
  --rgb-chart-6: 255 152 0;
  --rgb-chart-7: 11 26 43;
  --rgb-chart-8: 74 83 95;

  --shadow-1: 0 1px 0 rgba(11, 17, 24, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 1px 0 rgba(11, 17, 24, 0.07), 0 16px 44px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 1px 0 rgba(11, 17, 24, 0.07), 0 26px 70px rgba(0, 0, 0, 0.16);
  --shadow-4: 0 1px 0 rgba(11, 17, 24, 0.08), 0 34px 92px rgba(0, 0, 0, 0.22);

  --drsknn-ink: rgb(var(--rgb-text));
  --drsknn-ink-rgb: 11, 26, 43;
  --drsknn-ink-muted: rgb(var(--rgb-text-muted));
  --drsknn-ink-subtle: rgb(var(--rgb-text-subtle));

  --drsknn-text: var(--drsknn-ink);
  --drsknn-text-muted: var(--drsknn-ink-muted);
  --drsknn-text-subtle: var(--drsknn-ink-subtle);
  --drsknn-accent: var(--drsknn-gold);
  --drsknn-accent-ink: var(--drsknn-navy);

  --drsknn-bg0: #fdf7f0;
  --drsknn-bg1: #f6eee3;
  --drsknn-bg2: #e7dbc9;
  --drsknn-paper: #fdf7ec;

  --drsknn-surface: rgba(255, 255, 255, 0.92);
  --drsknn-surface-strong: rgba(255, 255, 255, 0.98);

  --drsknn-border: rgb(var(--rgb-border) / 0.55);
  --drsknn-border-strong: rgb(var(--rgb-border-strong) / 0.75);
  --drsknn-glow: rgba(var(--drsknn-gold-rgb), 0.38);
  --drsknn-glow-soft: rgba(var(--drsknn-gold-rgb), 0.22);
  --drsknn-navy-wash: rgba(var(--drsknn-navy-rgb), 0.06);

  --drsknn-shadow-1: var(--shadow-1);
  --drsknn-shadow-2: var(--shadow-2);
  --drsknn-shadow-3: var(--shadow-3);
  --drsknn-shadow-4: var(--shadow-4);

  --rgb-input-bg: 255 255 255;
  --rgb-input-border: 143 126 108;
  --rgb-input-placeholder: 123 130 142;

  --rgb-focus: 200 167 74;
  --focus-ring: 0 0 0 3px rgb(var(--rgb-focus) / 0.32);
}

/* =========================
   2) Global a11y + base paint
   ========================= */

html {
  background-color: rgb(var(--rgb-bg)) !important;
}

body {
  color: rgb(var(--rgb-text));
  background-color: rgb(var(--rgb-bg)) !important;
}

::selection {
  background: rgb(var(--rgb-accent) / 0.22);
}

:where(a) {
  color: rgb(var(--rgb-info));
}

:where(a:hover) {
  color: rgb(var(--rgb-text));
}

:where(:focus-visible) {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Prevent unreadable browser autofill across themes */
:where(input, textarea, select):-webkit-autofill {
  -webkit-text-fill-color: rgb(var(--rgb-text));
  transition: background-color 9999s ease-in-out 0s;
  caret-color: rgb(var(--rgb-text));
}

/* =========================
   3) Theme toggle button (injected by JS)
   ========================= */
.drsknn-theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10050;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgb(var(--rgb-border) / 0.7);
  background: rgb(var(--rgb-surface) / 0.7);
  backdrop-filter: blur(var(--drsknn-blur));
  color: rgb(var(--rgb-text));
  box-shadow: var(--shadow-2);
  cursor: pointer;
  user-select: none;
  font: 600 12px/1 var(--drsknn-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.drsknn-theme-toggle:hover {
  background: rgb(var(--rgb-surface) / 0.82);
  border-color: rgb(var(--rgb-border-strong) / 0.65);
}

.drsknn-theme-toggle .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgb(var(--rgb-accent) / 0.16);
  border: 1px solid rgb(var(--rgb-accent) / 0.32);
  color: rgb(var(--rgb-accent));
  font-size: 12px;
  line-height: 1;
}

/* =========================
   4) Tailwind CDN adapter
   =========================
   We avoid class selector escaping by using attribute selectors like:
   [class~="bg-slate-950/80"].
*/

/* App background / core surfaces */
[class~="bg-slate-950"] { background-color: rgb(var(--rgb-bg)) !important; }
[class~="bg-slate-950/95"] { background-color: rgb(var(--rgb-bg) / 0.95) !important; }
[class~="bg-slate-950/90"] { background-color: rgb(var(--rgb-bg) / 0.9) !important; }
[class~="bg-slate-950/80"] { background-color: rgb(var(--rgb-bg) / 0.8) !important; }
[class~="bg-slate-950/70"] { background-color: rgb(var(--rgb-bg) / 0.7) !important; }
[class~="bg-slate-950/60"] { background-color: rgb(var(--rgb-bg) / 0.6) !important; }
[class~="bg-slate-950/55"] { background-color: rgb(var(--rgb-bg) / 0.55) !important; }
[class~="bg-slate-950/50"] { background-color: rgb(var(--rgb-bg) / 0.5) !important; }
[class~="bg-slate-950/45"] { background-color: rgb(var(--rgb-bg) / 0.45) !important; }
[class~="bg-slate-950/40"] { background-color: rgb(var(--rgb-bg) / 0.4) !important; }
[class~="bg-slate-950/35"] { background-color: rgb(var(--rgb-bg) / 0.35) !important; }
[class~="bg-slate-950/30"] { background-color: rgb(var(--rgb-bg) / 0.3) !important; }

[class~="bg-slate-900"] { background-color: rgb(var(--rgb-surface)) !important; }
[class~="bg-slate-900/95"] { background-color: rgb(var(--rgb-surface) / 0.95) !important; }
[class~="bg-slate-900/90"] { background-color: rgb(var(--rgb-surface) / 0.9) !important; }
[class~="bg-slate-900/80"] { background-color: rgb(var(--rgb-surface) / 0.8) !important; }
[class~="bg-slate-900/70"] { background-color: rgb(var(--rgb-surface) / 0.7) !important; }
[class~="bg-slate-900/65"] { background-color: rgb(var(--rgb-surface) / 0.65) !important; }
[class~="bg-slate-900/60"] { background-color: rgb(var(--rgb-surface) / 0.6) !important; }
[class~="bg-slate-900/55"] { background-color: rgb(var(--rgb-surface) / 0.55) !important; }
[class~="bg-slate-900/50"] { background-color: rgb(var(--rgb-surface) / 0.5) !important; }

[class~="bg-slate-800"] { background-color: rgb(var(--rgb-surface-2)) !important; }
[class~="bg-slate-800/90"] { background-color: rgb(var(--rgb-surface-2) / 0.9) !important; }
[class~="bg-slate-800/80"] { background-color: rgb(var(--rgb-surface-2) / 0.8) !important; }
[class~="bg-slate-800/70"] { background-color: rgb(var(--rgb-surface-2) / 0.7) !important; }
[class~="bg-slate-800/60"] { background-color: rgb(var(--rgb-surface-2) / 0.6) !important; }
[class~="bg-slate-800/50"] { background-color: rgb(var(--rgb-surface-2) / 0.5) !important; }
[class~="bg-slate-800/45"] { background-color: rgb(var(--rgb-surface-2) / 0.45) !important; }
[class~="bg-slate-800/40"] { background-color: rgb(var(--rgb-surface-2) / 0.4) !important; }

[class~="bg-slate-700"] { background-color: rgb(var(--rgb-surface-3)) !important; }
[class~="bg-slate-700/90"] { background-color: rgb(var(--rgb-surface-3) / 0.9) !important; }
[class~="bg-slate-700/80"] { background-color: rgb(var(--rgb-surface-3) / 0.8) !important; }
[class~="bg-slate-700/70"] { background-color: rgb(var(--rgb-surface-3) / 0.7) !important; }
[class~="bg-slate-700/60"] { background-color: rgb(var(--rgb-surface-3) / 0.6) !important; }
[class~="bg-slate-700/50"] { background-color: rgb(var(--rgb-surface-3) / 0.5) !important; }
[class~="bg-slate-700/30"] { background-color: rgb(var(--rgb-surface-3) / 0.3) !important; }

/* Gradient stops (critical for full-page backgrounds like patient_dashboard.html) */
:root [class~="from-slate-950"] {
  --tw-gradient-from: rgb(var(--rgb-bg)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--rgb-bg) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
:root [class~="from-slate-950/80"] {
  --tw-gradient-from: rgb(var(--rgb-bg) / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--rgb-bg) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
:root [class~="from-slate-950/60"] {
  --tw-gradient-from: rgb(var(--rgb-bg) / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--rgb-bg) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
:root [class~="from-slate-950/40"] {
  --tw-gradient-from: rgb(var(--rgb-bg) / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--rgb-bg) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
:root [class~="from-slate-950/10"] {
  --tw-gradient-from: rgb(var(--rgb-bg) / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--rgb-bg) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

:root [class~="via-slate-900"] {
  --tw-gradient-to: rgb(var(--rgb-surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--rgb-surface)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
:root [class~="via-slate-900/90"] {
  --tw-gradient-to: rgb(var(--rgb-surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--rgb-surface) / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
:root [class~="via-slate-900/80"] {
  --tw-gradient-to: rgb(var(--rgb-surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--rgb-surface) / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
:root [class~="via-slate-900/70"] {
  --tw-gradient-to: rgb(var(--rgb-surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--rgb-surface) / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
:root [class~="via-slate-900/60"] {
  --tw-gradient-to: rgb(var(--rgb-surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--rgb-surface) / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

:root [class~="via-slate-950/45"] {
  --tw-gradient-to: rgb(var(--rgb-bg) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--rgb-bg) / 0.45) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
:root [class~="via-slate-950/40"] {
  --tw-gradient-to: rgb(var(--rgb-bg) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--rgb-bg) / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

:root [class~="to-slate-950"] { --tw-gradient-to: rgb(var(--rgb-bg)) var(--tw-gradient-to-position); }
:root [class~="to-slate-950/90"] { --tw-gradient-to: rgb(var(--rgb-bg) / 0.9) var(--tw-gradient-to-position); }
:root [class~="to-slate-950/80"] { --tw-gradient-to: rgb(var(--rgb-bg) / 0.8) var(--tw-gradient-to-position); }
:root [class~="to-slate-950/70"] { --tw-gradient-to: rgb(var(--rgb-bg) / 0.7) var(--tw-gradient-to-position); }
:root [class~="to-slate-950/60"] { --tw-gradient-to: rgb(var(--rgb-bg) / 0.6) var(--tw-gradient-to-position); }
:root [class~="to-slate-950/40"] { --tw-gradient-to: rgb(var(--rgb-bg) / 0.4) var(--tw-gradient-to-position); }
:root [class~="to-slate-950/35"] { --tw-gradient-to: rgb(var(--rgb-bg) / 0.35) var(--tw-gradient-to-position); }
:root [class~="to-slate-950/30"] { --tw-gradient-to: rgb(var(--rgb-bg) / 0.3) var(--tw-gradient-to-position); }
:root [class~="to-slate-950/25"] { --tw-gradient-to: rgb(var(--rgb-bg) / 0.25) var(--tw-gradient-to-position); }

/* Light-coded pages (admin/staff) should still render in dark theme */
:root:not([data-theme]) [class~="bg-gray-50"],
:root[data-theme="dark"] [class~="bg-gray-50"] { background-color: rgb(var(--rgb-bg)) !important; }
:root:not([data-theme]) [class~="bg-slate-50"],
:root[data-theme="dark"] [class~="bg-slate-50"] { background-color: rgb(var(--rgb-bg)) !important; }
:root:not([data-theme]) [class~="bg-slate-100"],
:root[data-theme="dark"] [class~="bg-slate-100"] { background-color: rgb(var(--rgb-surface)) !important; }
:root:not([data-theme]) [class~="bg-white"],
:root[data-theme="dark"] [class~="bg-white"] { background-color: rgb(var(--rgb-surface)) !important; }
:root[data-theme="light"] [class~="bg-black"] { background-color: rgb(var(--rgb-surface-2)) !important; }
:root:not([data-theme]) [class~="border-slate-100"],
:root[data-theme="dark"] [class~="border-slate-100"] { border-color: rgb(var(--rgb-border-subtle) / 0.75) !important; }
:root:not([data-theme]) [class~="border-slate-200"],
:root[data-theme="dark"] [class~="border-slate-200"] { border-color: rgb(var(--rgb-border) / 0.7) !important; }
:root:not([data-theme]) [class~="border-gray-200"],
:root[data-theme="dark"] [class~="border-gray-200"] { border-color: rgb(var(--rgb-border) / 0.7) !important; }

/* Borders */
[class~="border-slate-900"] { border-color: rgb(var(--rgb-border) / 0.85) !important; }
[class~="border-slate-800"] { border-color: rgb(var(--rgb-border) / 0.75) !important; }
[class~="border-slate-800/90"] { border-color: rgb(var(--rgb-border) / 0.9) !important; }
[class~="border-slate-800/80"] { border-color: rgb(var(--rgb-border) / 0.8) !important; }
[class~="border-slate-800/70"] { border-color: rgb(var(--rgb-border) / 0.7) !important; }
[class~="border-slate-800/60"] { border-color: rgb(var(--rgb-border) / 0.6) !important; }
[class~="border-slate-700"] { border-color: rgb(var(--rgb-border-strong) / 0.7) !important; }
[class~="border-slate-700/80"] { border-color: rgb(var(--rgb-border-strong) / 0.8) !important; }
[class~="border-slate-700/70"] { border-color: rgb(var(--rgb-border-strong) / 0.7) !important; }
[class~="border-slate-700/60"] { border-color: rgb(var(--rgb-border-strong) / 0.6) !important; }

/* Text */
[class~="text-slate-50"],
[class~="text-slate-100"],
[class~="text-slate-200"] { color: rgb(var(--rgb-text)) !important; }

[class~="text-slate-300"],
[class~="text-slate-300/90"] { color: rgb(var(--rgb-text-2) / 0.92) !important; }

[class~="text-slate-400"],
[class~="text-slate-400/90"] { color: rgb(var(--rgb-text-muted) / 0.9) !important; }

[class~="text-slate-500"] { color: rgb(var(--rgb-text-subtle) / 0.92) !important; }

:root[data-theme="light"] :is(
  [class~="bg-slate-950"],
  [class~="bg-slate-900"],
  [class~="bg-slate-800"],
  [class~="bg-slate-700"],
  [class~="bg-black"],
  [class~="bg-white"]
)[class~="text-white"] { color: rgb(var(--rgb-text)) !important; }

:root:not([data-theme]) [class~="text-gray-900"],
:root[data-theme="dark"] [class~="text-gray-900"] { color: rgb(var(--rgb-text)) !important; }
:root:not([data-theme]) [class~="text-gray-800"],
:root[data-theme="dark"] [class~="text-gray-800"] { color: rgb(var(--rgb-text)) !important; }
:root:not([data-theme]) [class~="text-gray-700"],
:root[data-theme="dark"] [class~="text-gray-700"] { color: rgb(var(--rgb-text-2)) !important; }
:root:not([data-theme]) [class~="text-gray-600"],
:root[data-theme="dark"] [class~="text-gray-600"] { color: rgb(var(--rgb-text-muted)) !important; }
:root:not([data-theme]) [class~="text-gray-500"],
:root[data-theme="dark"] [class~="text-gray-500"] { color: rgb(var(--rgb-text-muted)) !important; }

:root:not([data-theme]) [class~="text-slate-900"],
:root[data-theme="dark"] [class~="text-slate-900"] { color: rgb(var(--rgb-text)) !important; }
:root:not([data-theme]) [class~="text-slate-800"],
:root[data-theme="dark"] [class~="text-slate-800"] { color: rgb(var(--rgb-text)) !important; }
:root:not([data-theme]) [class~="text-slate-700"],
:root[data-theme="dark"] [class~="text-slate-700"] { color: rgb(var(--rgb-text-2)) !important; }
:root:not([data-theme]) [class~="text-slate-600"],
:root[data-theme="dark"] [class~="text-slate-600"] { color: rgb(var(--rgb-text-muted)) !important; }

/* Divide utilities (table separators) */
:root:not([data-theme]) [class~="divide-slate-100"] > :not([hidden]) ~ :not([hidden]),
:root[data-theme="dark"] [class~="divide-slate-100"] > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--rgb-border) / 0.45) !important;
}
:root:not([data-theme]) [class~="divide-slate-200"] > :not([hidden]) ~ :not([hidden]),
:root[data-theme="dark"] [class~="divide-slate-200"] > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--rgb-border) / 0.55) !important;
}

/* Placeholders */
[class~="placeholder:text-slate-500"]::placeholder { color: rgb(var(--rgb-input-placeholder) / 0.92) !important; }

/* Light theme: keep pale accent/status text readable on light surfaces */
:root[data-theme="light"] :is(
  [class~="text-amber-100"],
  [class~="text-amber-200"],
  [class~="text-amber-300"],
  [class~="text-amber-200/80"],
  [class~="text-amber-300/80"]
) { color: rgb(var(--rgb-accent-deep)) !important; }

:root[data-theme="light"] :is(
  [class~="text-emerald-200"],
  [class~="text-emerald-300"],
  [class~="text-emerald-200/80"],
  [class~="text-emerald-300/80"]
) { color: rgb(var(--rgb-success)) !important; }

:root[data-theme="light"] :is(
  [class~="text-sky-200"],
  [class~="text-sky-300"],
  [class~="text-sky-200/80"],
  [class~="text-sky-300/80"],
  [class~="text-teal-300"],
  [class~="text-teal-400"],
  [class~="text-teal-500"],
  [class~="text-teal-300/80"]
) { color: rgb(var(--rgb-info)) !important; }

/* Light theme: legacy hex accent inks (used in a few templates) must stay readable on light surfaces */
:root[data-theme="light"] :is(
  [class~="text-[#ffeec0]"],
  [class~="text-[#f1d28a]"]
) { color: rgb(var(--rgb-accent-deep)) !important; }

/* Status utilities used in staff/admin tables */
[class~="bg-green-100"] { background-color: rgb(var(--rgb-success) / 0.14) !important; }
[class~="text-green-700"] { color: rgb(var(--rgb-success) / 0.92) !important; }
[class~="bg-red-100"] { background-color: rgb(var(--rgb-danger) / 0.14) !important; }
[class~="text-red-700"] { color: rgb(var(--rgb-danger) / 0.92) !important; }
[class~="text-blue-600"],
[class~="text-blue-700"] { color: rgb(var(--rgb-info) / 0.92) !important; }
[class~="bg-blue-600"] { background-color: rgb(var(--rgb-navy) / 0.95) !important; }
[class~="hover:bg-blue-500"]:hover { background-color: rgb(var(--rgb-navy) / 0.86) !important; }

/* Hover variants (common) */
:root[data-theme="light"] :is(
  [class~="hover:bg-slate-700/80"]:hover,
  [class~="hover:bg-slate-700/90"]:hover,
  [class~="hover:bg-slate-700"]:hover,
  [class~="hover:bg-slate-800/80"]:hover,
  [class~="hover:bg-slate-800"]:hover,
  [class~="hover:bg-slate-900"]:hover,
  [class~="hover:bg-slate-900/80"]:hover,
  [class~="hover:bg-slate-900/70"]:hover
) {
  background-color: rgb(var(--rgb-surface-3) / 0.62) !important;
}

/* Arbitrary accent classes used across templates (tokenized) */
:is(
  [class*="bg-[#c8a74a]"],
  [class*="bg-\\[\\#c8a74a\\]"]
) { background-color: rgb(var(--rgb-accent)) !important; }

:is(
  [class*="bg-[#f1d28a]"],
  [class*="bg-\\[\\#f1d28a\\]"]
) { background-color: rgb(var(--rgb-accent-soft)) !important; }

:is(
  [class*="bg-[#b78c3f]"],
  [class*="bg-\\[\\#b78c3f\\]"]
) { background-color: rgb(var(--rgb-accent-deep)) !important; }

:is(
  [class*="bg-[#ffeec0]"],
  [class*="bg-\\[\\#ffeec0\\]"]
) { background-color: rgb(var(--rgb-accent-wash)) !important; }

:is(
  [class*="text-[#0b1a2b]"],
  [class*="text-\\[\\#0b1a2b\\]"]
) { color: rgb(var(--rgb-on-accent)) !important; }

:is(
  [class*="text-[#f1d28a]"],
  [class*="text-\\[\\#f1d28a\\]"]
) { color: rgb(var(--rgb-accent-soft)) !important; }

:is(
  [class*="text-[#ffeec0]"],
  [class*="text-\\[\\#ffeec0\\]"]
) { color: rgb(var(--rgb-accent-wash)) !important; }

:is(
  [class*="text-[#04140f]"],
  [class*="text-\\[\\#04140f\\]"]
) { color: rgb(var(--rgb-on-success)) !important; }

:is(
  [class*="border-[#c8a74a]"],
  [class*="border-\\[\\#c8a74a\\]"]
) { border-color: rgb(var(--rgb-accent)) !important; }

:is(
  [class*="hover:bg-[#c8a74a]"]:hover,
  [class*="hover:bg-\\[\\#c8a74a\\]"]:hover
) { background-color: rgb(var(--rgb-accent)) !important; }

:is(
  [class*="hover:bg-[#f1d28a]"]:hover,
  [class*="hover:bg-\\[\\#f1d28a\\]"]:hover
) { background-color: rgb(var(--rgb-accent-soft)) !important; }

:is(
  [class*="hover:bg-[#b78c3f]"]:hover,
  [class*="hover:bg-\\[\\#b78c3f\\]"]:hover
) { background-color: rgb(var(--rgb-accent-deep)) !important; }

:is(
  [class*="focus:ring-[#c8a74a]"]:focus,
  [class*="focus:ring-\\[\\#c8a74a\\]"]:focus
) { --tw-ring-color: rgb(var(--rgb-focus) / 0.55) !important; }

[class~="bg-[rgba(200,167,74,0.06)]"] { background-color: rgb(var(--rgb-accent) / 0.06) !important; }
[class~="bg-[rgba(200,167,74,0.08)]"] { background-color: rgb(var(--rgb-accent) / 0.08) !important; }
[class~="bg-[rgba(200,167,74,0.10)]"] { background-color: rgb(var(--rgb-accent) / 0.10) !important; }
[class~="bg-[rgba(200,167,74,0.12)]"] { background-color: rgb(var(--rgb-accent) / 0.12) !important; }
[class~="bg-[rgba(200,167,74,0.14)]"] { background-color: rgb(var(--rgb-accent) / 0.14) !important; }
[class~="bg-[rgba(200,167,74,0.15)]"] { background-color: rgb(var(--rgb-accent) / 0.15) !important; }
[class~="bg-[rgba(200,167,74,0.16)]"] { background-color: rgb(var(--rgb-accent) / 0.16) !important; }
[class~="bg-[rgba(200,167,74,0.18)]"] { background-color: rgb(var(--rgb-accent) / 0.18) !important; }
[class~="bg-[rgba(200,167,74,0.22)]"] { background-color: rgb(var(--rgb-accent) / 0.22) !important; }
[class~="bg-[rgba(200,167,74,0.25)]"] { background-color: rgb(var(--rgb-accent) / 0.25) !important; }
[class~="bg-[color:rgba(200,167,74,0.75)]"] { background-color: rgb(var(--rgb-accent) / 0.75) !important; }

[class~="border-[color:rgba(200,167,74,0.22)]"] { border-color: rgb(var(--rgb-accent) / 0.22) !important; }
[class~="border-[color:rgba(200,167,74,0.30)]"] { border-color: rgb(var(--rgb-accent) / 0.30) !important; }
[class~="border-[color:rgba(200,167,74,0.35)]"] { border-color: rgb(var(--rgb-accent) / 0.35) !important; }
[class~="border-[color:rgba(200,167,74,0.45)]"] { border-color: rgb(var(--rgb-accent) / 0.45) !important; }
[class~="border-[color:rgba(200,167,74,0.55)]"] { border-color: rgb(var(--rgb-accent) / 0.55) !important; }
[class~="border-[color:rgba(200,167,74,0.6)]"] { border-color: rgb(var(--rgb-accent) / 0.6) !important; }

:root[data-theme="light"] [class~="bg-[rgba(2,6,23,0.55)]"] { background-color: rgb(var(--rgb-surface-2) / 0.72) !important; }

:is(
  [class*="from-[#f1d28a]"],
  [class*="via-[#c8a74a]"],
  [class*="to-[#b78c3f]"]
) {
  /* keep gradients stable but tokenized by setting CSS vars that Tailwind will read if present */
}

[class*="from-[#f1d28a]"] {
  --tw-gradient-from: rgb(var(--rgb-accent-soft) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--rgb-accent-soft) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

[class*="via-[#c8a74a]"] {
  --tw-gradient-to: rgb(var(--rgb-accent) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--rgb-accent) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

[class*="to-[#b78c3f]"] {
  --tw-gradient-to: rgb(var(--rgb-accent-deep) / 1) var(--tw-gradient-to-position);
}

/* =========================
   5) Overlays / modals / tooltips / toasts
   ========================= */

[data-command-overlay] {
  background: rgb(var(--rgb-overlay) / var(--overlay-alpha)) !important;
}

.ui-command-overlay {
  background: rgb(var(--rgb-overlay) / var(--overlay-alpha)) !important;
}

.ui-command {
  background: rgb(var(--rgb-surface) / 0.92) !important;
  border-color: rgb(var(--rgb-border) / 0.8) !important;
  color: rgb(var(--rgb-text)) !important;
}

.ui-toast {
  background: rgb(var(--rgb-surface) / 0.92) !important;
  border-color: rgb(var(--rgb-border) / 0.75) !important;
  color: rgb(var(--rgb-text-2)) !important;
}

/* =========================
   6) Page-specific adapters
   ========================= */

/* HQ (admin/staff) inline tokens (templates/hq/base.html contains hard-coded rgba values) */
.hq-card {
  border: 1px solid rgb(var(--rgb-border) / 0.6) !important;
  background: rgb(var(--rgb-surface) / 0.52) !important;
}

.hq-card-strong {
  border: 1px solid rgb(var(--rgb-accent) / 0.22) !important;
  background: rgb(var(--rgb-bg) / 0.66) !important;
}

.hq-chip {
  border: 1px solid rgb(var(--rgb-border) / 0.55) !important;
  background: rgb(var(--rgb-bg) / 0.56) !important;
}

/* Live analysis widgets (static/live_analysis.css uses hard-coded dark colors) */
:root[data-theme="light"] .live-analysis-root,
:root[data-theme="light"] .live-video-card,
:root[data-theme="light"] .live-guard,
:root[data-theme="light"] .live-ghost-btn,
:root[data-theme="light"] .live-toggle,
:root[data-theme="light"] .live-pill,
:root[data-theme="light"] .live-pin,
:root[data-theme="light"] .live-guidance {
  background: rgb(var(--rgb-surface) / 0.92) !important;
  border-color: rgb(var(--rgb-border) / 0.12) !important;
  color: rgb(var(--rgb-text)) !important;
}

:root[data-theme="light"] .live-kicker,
:root[data-theme="light"] .live-subtitle,
:root[data-theme="light"] .live-guard-body,
:root[data-theme="light"] .live-pin-label {
  color: rgb(var(--rgb-text-muted) / 0.92) !important;
}

:root[data-theme="light"] .live-title,
:root[data-theme="light"] .live-pin-value {
  color: rgb(var(--rgb-text)) !important;
}

/* AR HUD base containers (static/css/ar_hud.css is dark-first) */
:root[data-theme="light"] .ar-hud-root {
  background: linear-gradient(135deg, rgb(var(--rgb-bg)), rgb(var(--rgb-surface-2))) !important;
  color: rgb(var(--rgb-text)) !important;
}

:root[data-theme="light"] .ar-hud-panel,
:root[data-theme="light"] .ar-hud-chip,
:root[data-theme="light"] .ar-hud-modal,
:root[data-theme="light"] .ar-hud-tooltip {
  background: rgb(var(--rgb-surface) / 0.92) !important;
  border-color: rgb(var(--rgb-border) / 0.12) !important;
  color: rgb(var(--rgb-text)) !important;
}

/* Skin analysis flow (static/skin_analysis/app.css is light-first) */
:root:not([data-theme]) body[data-embed],
:root[data-theme="dark"] body[data-embed] {
  color: rgb(var(--rgb-text)) !important;
}

:root:not([data-theme]) .sa-top,
:root[data-theme="dark"] .sa-top {
  background: rgb(var(--rgb-surface) / 0.6) !important;
  border-color: rgb(var(--rgb-border) / 0.7) !important;
  box-shadow: var(--shadow-3) !important;
}

:root:not([data-theme]) .sa-logo-wrap,
:root[data-theme="dark"] .sa-logo-wrap {
  background: rgb(var(--rgb-surface) / 0.82) !important;
  border-color: rgb(var(--rgb-border) / 0.7) !important;
  box-shadow: var(--shadow-2) !important;
}

:root:not([data-theme]) .sa-card,
:root[data-theme="dark"] .sa-card {
  background: rgb(var(--rgb-surface) / 0.82) !important;
  border-color: rgb(var(--rgb-border) / 0.7) !important;
  box-shadow: var(--shadow-3) !important;
}

:root:not([data-theme]) .sa-exit,
:root[data-theme="dark"] .sa-exit {
  background: rgb(var(--rgb-surface) / 0.65) !important;
  border-color: rgb(var(--rgb-border) / 0.7) !important;
  color: rgb(var(--rgb-text)) !important;
}

:root:not([data-theme]) .sa-brand-kicker,
:root[data-theme="dark"] .sa-brand-kicker {
  color: rgb(var(--rgb-text-muted) / 0.92) !important;
}

:root:not([data-theme]) .sa-field :is(input, select),
:root[data-theme="dark"] .sa-field :is(input, select) {
  background: rgb(var(--rgb-input-bg) / 0.55) !important;
  border-color: rgb(var(--rgb-input-border) / 0.7) !important;
  color: rgb(var(--rgb-text)) !important;
}

:root:not([data-theme]) .sa-field :is(input, select)::placeholder,
:root[data-theme="dark"] .sa-field :is(input, select)::placeholder {
  color: rgb(var(--rgb-input-placeholder) / 0.92) !important;
}

/* =========================
   7) Print safety
   ========================= */
@media print {
  :root {
    color-scheme: light;
  }
  :root,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .drsknn-theme-toggle {
    display: none !important;
  }
}