:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elev: #fafafa;
  --bg-sunken: #f4f4f5;
  --bg-neutro: #f4f4f5;
  --bg-neutro-linea: #e4e4e7;
  --bg-track: #f0f0f1;
  --bg-card: #ffffff;
  --bg-bubble: #f4f4f5;
  --bg-own: #141414;
  --bg-hover: #f0f0f1;
  --bg-hover-wash: rgba(255, 255, 255, 0.6);
  --ink: #141414;
  --ink-2: #3f3f46;
  --ink-on-own: #ffffff;
  --ink-on-fill: #ffffff;
  --muted: #71717a;
  --muted-2: #a1a1aa;
  --hairline: #ececee;
  --hairline-strong: #e4e4e7;
  --fill: #141414;
  --accent: #0070f3;
  --accent-line: #0070f3;
  --ink-on-accent: #ffffff;
  --accent-bg: #ebf3ff;
  --danger: #b4232a;
  --danger-strong: #b91c1c;
  --ok: #166534;
  --ok-bg: #f0fdf4;
  --ok-bg-2: #bbf7d0;
  --warn: #9a5b00;
  --warn-mark: #f5a524;
  --warn-bg: #fff4e0;
  --scrim: rgba(20, 20, 20, 0.28);
  --shadow: rgba(0, 0, 0, 0.08);
  --shadow-soft: rgba(0, 0, 0, 0.04);
  --shadow-deep: rgba(0, 0, 0, 0.12);
  --focus: #a1a1aa;
  --pill: #ffffff;
  --letter-bg: #f0f0f2;
  --letter-ink: #5f5f66;
  --text: #141414;
  --panel: #ffffff;
  --panel-2: #fafafa;
  --line: #ececee;
  --muted-legacy: #8d949e;

  /*
   * Compositor (regla de casa). Safari presta SOLO geometría (44, side/gap).
   * Superficies = las mismas fichas que cards, .choice, .vn-tile y .vs-tab.
   * No hay hex acá: si cambia la paleta, el compositor cambia con ella.
   */
  --comp-d: 44px;
  --comp-surface: var(--bg-card);
  --comp-linea: var(--hairline);
  --comp-sombra: 0 1px 2px var(--shadow-soft);
  --comp-plus: var(--bg-sunken);
  --comp-plus-ink: var(--ink);
  --comp-send: var(--fill);
  --comp-send-ink: var(--ink-on-fill);
  --comp-send-off: var(--bg-sunken);
  --comp-send-off-ink: var(--muted);
  --comp-ph: var(--muted);
  --comp-ph-min: 22ch;
  /* Hueco del canto de la pastilla al texto. Escritorio: igual al inset derecho del mic. */
  --comp-pad-x: 16px;
  --comp-rec: var(--danger);
}

html[data-tema="dark"] {
  color-scheme: dark;
  --bg: #1c1c1e;
  --bg-elev: #202022;
  --bg-sunken: #2a2a2c;
  --bg-neutro: #2c2c2e;
  --bg-neutro-linea: rgba(255, 255, 255, 0.1);
  --bg-track: #2c2c2e;
  --bg-card: #242426;
  --bg-bubble: #2c2c2e;
  --bg-own: #3a3a3c;
  --bg-hover: #343438;
  --bg-hover-wash: rgba(255, 255, 255, 0.08);
  --ink: #f2f2f4;
  --ink-2: #d4d4d8;
  --ink-on-own: #f2f2f4;
  --ink-on-fill: #1c1c1e;
  --muted: #a1a1aa;
  --muted-2: #a1a1aa;
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --fill: #f2f2f4;
  --accent: #2563eb;
  --accent-line: #8eb7ff;
  --ink-on-accent: #f2f2f4;
  --accent-bg: #1a2744;
  --danger: #fca5a5;
  --danger-strong: #fca5a5;
  --ok: #86efac;
  --ok-bg: #13281d;
  --ok-bg-2: #163524;
  --warn: #f5c16c;
  --warn-mark: #f5a524;
  --warn-bg: #2a2114;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: rgba(0, 0, 0, 0.45);
  --shadow-soft: rgba(0, 0, 0, 0.3);
  --shadow-deep: rgba(0, 0, 0, 0.55);
  --focus: #a1a1aa;
  --pill: #2c2c2e;
  --letter-bg: #2c2c2e;
  --letter-ink: #d4d4d8;
  --text: #f2f2f4;
  --panel: #202022;
  --panel-2: #242426;
  --line: rgba(255, 255, 255, 0.1);
  --muted-legacy: #a1a1aa;
  --comp-d: 44px;
  --comp-surface: var(--bg-card);
  --comp-linea: var(--hairline);
  --comp-sombra: 0 1px 2px var(--shadow-soft);
  --comp-plus: var(--bg-sunken);
  --comp-plus-ink: var(--ink);
  --comp-send: var(--fill);
  --comp-send-ink: var(--ink-on-fill);
  --comp-send-off: var(--bg-sunken);
  --comp-send-off-ink: var(--muted);
  --comp-ph: var(--muted);
  --comp-ph-min: 22ch;
  /* Hueco del canto de la pastilla al texto. Escritorio: igual al inset derecho del mic. */
  --comp-pad-x: 16px;
  --comp-rec: var(--danger);
}

html {
  background-color: var(--bg);
  min-height: 100dvh;
}
body {
  background-color: var(--bg);
  min-height: 100dvh;
}

/* Un color sin registrar cambia de golpe. Registrados, interpolan, y todo lo que
 * los usa (tarjeta, texto, chip) se mueve junto. Si cada ficha tuviera su propia
 * curva, la que no la tiene salta y la que la tiene llega antes. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --bg-elev { syntax: "<color>"; inherits: true; initial-value: #fafafa; }
@property --bg-sunken { syntax: "<color>"; inherits: true; initial-value: #f4f4f5; }
@property --bg-neutro { syntax: "<color>"; inherits: true; initial-value: #f4f4f5; }
@property --bg-neutro-linea { syntax: "<color>"; inherits: true; initial-value: #e4e4e7; }
@property --bg-track { syntax: "<color>"; inherits: true; initial-value: #f0f0f1; }
@property --bg-card { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --bg-bubble { syntax: "<color>"; inherits: true; initial-value: #f4f4f5; }
@property --bg-own { syntax: "<color>"; inherits: true; initial-value: #141414; }
@property --bg-hover { syntax: "<color>"; inherits: true; initial-value: #f0f0f1; }
@property --bg-hover-wash { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.6); }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #141414; }
@property --ink-2 { syntax: "<color>"; inherits: true; initial-value: #3f3f46; }
@property --ink-on-own { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --ink-on-fill { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #71717a; }
@property --muted-2 { syntax: "<color>"; inherits: true; initial-value: #a1a1aa; }
@property --hairline { syntax: "<color>"; inherits: true; initial-value: #ececee; }
@property --hairline-strong { syntax: "<color>"; inherits: true; initial-value: #e4e4e7; }
@property --fill { syntax: "<color>"; inherits: true; initial-value: #141414; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #0070f3; }
@property --accent-line { syntax: "<color>"; inherits: true; initial-value: #0070f3; }
@property --ink-on-accent { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --accent-bg { syntax: "<color>"; inherits: true; initial-value: #ebf3ff; }
@property --danger { syntax: "<color>"; inherits: true; initial-value: #b4232a; }
@property --danger-strong { syntax: "<color>"; inherits: true; initial-value: #b91c1c; }
@property --ok { syntax: "<color>"; inherits: true; initial-value: #166534; }
@property --ok-bg { syntax: "<color>"; inherits: true; initial-value: #f0fdf4; }
@property --ok-bg-2 { syntax: "<color>"; inherits: true; initial-value: #bbf7d0; }
@property --warn { syntax: "<color>"; inherits: true; initial-value: #9a5b00; }
@property --warn-mark { syntax: "<color>"; inherits: true; initial-value: #f5a524; }
@property --warn-bg { syntax: "<color>"; inherits: true; initial-value: #fff4e0; }
@property --scrim { syntax: "<color>"; inherits: true; initial-value: rgba(20, 20, 20, 0.28); }
@property --shadow { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.08); }
@property --shadow-soft { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.04); }
@property --shadow-deep { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.12); }
@property --focus { syntax: "<color>"; inherits: true; initial-value: #a1a1aa; }
@property --pill { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --letter-bg { syntax: "<color>"; inherits: true; initial-value: #f0f0f2; }
@property --letter-ink { syntax: "<color>"; inherits: true; initial-value: #5f5f66; }
@property --text { syntax: "<color>"; inherits: true; initial-value: #141414; }
@property --panel { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --panel-2 { syntax: "<color>"; inherits: true; initial-value: #fafafa; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #ececee; }
@property --muted-legacy { syntax: "<color>"; inherits: true; initial-value: #8d949e; }

:where(a[href], button, input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    transition-property: --bg, --bg-elev, --bg-sunken, --bg-neutro, --bg-neutro-linea, --bg-track, --bg-card, --bg-bubble, --bg-own, --bg-hover, --bg-hover-wash, --ink, --ink-2, --ink-on-own, --ink-on-fill, --muted, --muted-2, --hairline, --hairline-strong, --fill, --accent, --accent-line, --ink-on-accent, --accent-bg, --danger, --danger-strong, --ok, --ok-bg, --ok-bg-2, --warn, --warn-mark, --warn-bg, --scrim, --shadow, --shadow-soft, --shadow-deep, --focus, --pill, --letter-bg, --letter-ink, --text, --panel, --panel-2, --line, --muted-legacy;
    transition-duration: 200ms;
    transition-timing-function: ease;
  }
}