/* Shared theme colors and transitions. */
:root {
  --theme-transition-properties: background-color, border-color, box-shadow;
  --theme-transition-duration: 0.3s;
  transition-property: --text-primary, --muted-text-color, --icon-contrast-color, --header-action-text;
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: ease;
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #212121;
  --border-color: #dddddd;
  --divider-color: #dddddd;
  --icon-contrast-color: #121212;
  --focus-accent-color: #4aa3ff;
  --muted-text-color: #666666;
  --io-border: #ced4da;
  --switch-off: var(--bg-secondary);
  --switch-border: #ced4da;
  --hide-input-border: rgba(0, 0, 0, 0.2);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --text-primary: #ffffff;
  --border-color: #333333;
  --divider-color: #333333;
  --icon-contrast-color: #ffffff;
  --muted-text-color: #888888;
  --io-border: #333333;
  --switch-off: #2a2a2a;
  --switch-border: #333333;
  --hide-input-border: rgba(255, 255, 255, 0.2);
  color-scheme: dark;
}

.theme-surface {
  background-color: var(--bg-primary);
}

html,
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

input {
  caret-color: var(--focus-accent-color);
}

/* Keep Safari's browser-chrome backgrounds immediate; animate the visible surface. */
*:not(html):not(body),
*::before,
*::after {
  transition-property: var(--theme-transition-properties);
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: ease;
}

/* Animate inherited theme colors once, at their source. Descendants consume
   the same value instead of starting another color transition each frame. */
@property --text-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #212121;
}
@property --muted-text-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #666666;
}
@property --icon-contrast-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #121212;
}
@property --header-action-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #121212;
}
html[data-theme-no-transition],
html[data-theme-no-transition] *,
html[data-theme-no-transition] *::before,
html[data-theme-no-transition] *::after {
  transition-duration: 0s !important;
}
html[data-theme-transitioning] *,
html[data-theme-transitioning] *::before,
html[data-theme-transitioning] *::after {
  transition-property: var(--theme-transition-properties) !important;
}