/* ScrapMap color tokens are shared by Tailwind utilities and native controls. */
:root {
  --sm-background: 246 247 249;
  --sm-surface: 246 247 249;
  --sm-surface-bright: 255 255 255;
  --sm-surface-container-lowest: 255 255 255;
  --sm-surface-container-low: 242 244 247;
  --sm-surface-container: 236 238 242;
  --sm-surface-container-high: 230 233 238;
  --sm-surface-container-highest: 223 227 233;
  --sm-surface-variant: 226 229 235;
  --sm-surface-dim: 217 221 228;
  --sm-primary: 30 88 163;
  --sm-primary-container: 35 105 188;
  --sm-primary-fixed: 221 235 255;
  --sm-primary-fixed-dim: 174 207 247;
  --sm-secondary: 37 101 178;
  --sm-secondary-container: 178 211 250;
  --sm-secondary-fixed: 225 237 255;
  --sm-secondary-fixed-dim: 180 211 248;
  --sm-tertiary: 139 75 31;
  --sm-tertiary-container: 105 53 39;
  --sm-tertiary-fixed: 255 219 209;
  --sm-tertiary-fixed-dim: 255 181 161;
  --sm-error: 186 26 26;
  --sm-error-container: 255 218 214;
  --sm-outline: 107 115 128;
  --sm-outline-variant: 183 190 202;
  --sm-on-background: 29 33 40;
  --sm-on-surface: 29 33 40;
  --sm-on-surface-variant: 83 91 105;
  --sm-on-primary: 255 255 255;
  --sm-on-primary-container: 236 244 255;
  --sm-on-primary-fixed: 15 42 77;
  --sm-on-primary-fixed-variant: 28 77 137;
  --sm-on-secondary: 255 255 255;
  --sm-on-secondary-container: 0 68 112;
  --sm-on-secondary-fixed: 0 29 52;
  --sm-on-secondary-fixed-variant: 0 74 120;
  --sm-on-tertiary: 255 255 255;
  --sm-on-tertiary-container: 232 159 140;
  --sm-on-tertiary-fixed: 55 14 4;
  --sm-on-tertiary-fixed-variant: 109 56 42;
  --sm-on-error: 255 255 255;
  --sm-on-error-container: 147 0 10;
  --sm-inverse-primary: 174 207 247;
  --sm-inverse-surface: 41 45 53;
  --sm-inverse-on-surface: 240 242 246;
  --sm-surface-tint: 48 111 193;
}

html.dark {
  color-scheme: dark;
  --sm-background: 12 13 16;
  --sm-surface: 16 17 20;
  --sm-surface-bright: 21 22 26;
  --sm-surface-container-lowest: 25 26 30;
  --sm-surface-container-low: 21 22 26;
  --sm-surface-container: 31 33 38;
  --sm-surface-container-high: 40 42 48;
  --sm-surface-container-highest: 49 51 59;
  --sm-surface-variant: 49 51 59;
  --sm-surface-dim: 10 11 13;
  --sm-primary: 147 190 250;
  --sm-primary-container: 130 180 246;
  --sm-primary-fixed: 35 52 76;
  --sm-primary-fixed-dim: 51 77 111;
  --sm-secondary: 143 190 250;
  --sm-secondary-container: 132 180 243;
  --sm-secondary-fixed: 32 49 73;
  --sm-secondary-fixed-dim: 48 75 109;
  --sm-tertiary: 237 189 152;
  --sm-tertiary-container: 217 157 114;
  --sm-tertiary-fixed: 88 58 40;
  --sm-tertiary-fixed-dim: 121 82 58;
  --sm-error: 255 180 171;
  --sm-error-container: 97 42 39;
  --sm-outline: 159 165 177;
  --sm-outline-variant: 145 151 163;
  --sm-on-background: 235 236 239;
  --sm-on-surface: 235 236 239;
  --sm-on-surface-variant: 186 191 201;
  --sm-on-primary: 13 32 57;
  --sm-on-primary-container: 13 32 57;
  --sm-on-primary-fixed: 227 238 255;
  --sm-on-primary-fixed-variant: 203 224 252;
  --sm-on-secondary: 8 30 51;
  --sm-on-secondary-container: 8 41 63;
  --sm-on-secondary-fixed: 215 234 255;
  --sm-on-secondary-fixed-variant: 193 225 255;
  --sm-on-tertiary: 45 22 9;
  --sm-on-tertiary-container: 45 22 9;
  --sm-on-tertiary-fixed: 255 226 207;
  --sm-on-tertiary-fixed-variant: 255 214 188;
  --sm-on-error: 75 18 17;
  --sm-on-error-container: 255 218 214;
  --sm-inverse-primary: 43 101 178;
  --sm-inverse-surface: 222 226 233;
  --sm-inverse-on-surface: 37 42 50;
  --sm-surface-tint: 147 190 250;
}

body {
  background-color: rgb(var(--sm-background));
  color: rgb(var(--sm-on-surface));
}

.theme-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.5rem;
  padding: .5rem .7rem;
  border: 1px solid rgb(var(--sm-outline-variant) / .35);
  border-radius: .25rem;
  background: rgb(var(--sm-surface-container-lowest));
  color: rgb(var(--sm-on-surface-variant));
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: rgb(var(--sm-secondary) / .65);
  color: rgb(var(--sm-secondary));
}

.theme-toggle .material-symbols-outlined { font-size: 19px; }

.auth-theme-toggle {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
}

html.dark .auth-shell { background: linear-gradient(135deg, #0c0e13, #171a22 55%, #101c30); }

html.dark :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background-color: rgb(var(--sm-surface-container-lowest));
  color: rgb(var(--sm-on-surface));
  border-color: rgb(var(--sm-outline-variant) / .45);
}

html.dark :where(input, textarea)::placeholder { color: #9ba3b0; opacity: 1; }
html.dark :where(input[type="checkbox"], input[type="radio"]) { accent-color: rgb(var(--sm-primary)); }
html.dark :where(input[type="checkbox"], input[type="radio"]):not(:checked) { background-color: #202229; border-color: #747e8c; }
html.dark :where(input[type="checkbox"], input[type="radio"]):checked { background-color: #377ed0; border-color: #80b7ff; }
html.dark :where(button, a, summary, input, select, textarea):focus-visible { outline-color: rgb(var(--sm-secondary)); }
html.dark .navigation-trigger { background: rgb(var(--sm-surface-container-lowest)); color: rgb(var(--sm-primary)); border-color: rgb(var(--sm-outline-variant) / .5); }
html.dark .navigation-drawer { background: rgb(var(--sm-surface-container-low)); color: rgb(var(--sm-on-surface)); }
html.dark .navigation-drawer :is(header, footer) { border-color: rgb(var(--sm-outline-variant) / .4); }
html.dark .skip-content { background: rgb(var(--sm-surface-container-lowest)); color: rgb(var(--sm-primary)); }
html.dark .app-scrollbar::-webkit-scrollbar-thumb { background-color: rgb(var(--sm-outline-variant) / .45); }
html.dark ::selection { background: #30588a; color: #eef5ff; }

@media (max-width: 767px) {
  .theme-toggle { width: 44px; min-width: 44px; padding-inline: .5rem; }
  .theme-toggle [data-theme-label] { display: none; }
}

@media (max-width: 639px) {
  .app-header-controls .app-profile-control { flex: 1 1 auto; width: auto; }
}