/* Tokens del tema. «Alba» (día) y «Cacao» (noche), los del diseño aprobado.
   Ningún otro archivo escribe un color a mano: todos usan estas variables, así el cambio de tema es
   uno solo. --border es el contorno de lo que se toca o se lee como tarjeta; --divider, la línea
   que solo separa; --raised, el fondo de una opción dentro de una tarjeta. data-theme lo pone theme-init.js antes de pintar, y core/theme.js después. */

:root {
  color-scheme: light;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --header-h: 72px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  --bg: #eadbcd;
  --surface: #faf2eb;
  --surface-2: #efdfd1;
  --border: #c9ad98;
  --divider: #c9ad98;
  --raised: #efdfd1;
  --text: #2c211c;
  --muted: #695347;
  --accent: #af643c;
  --accent-text: #8a4a28;
  --ink: #3a2720;
  --ink-text: #faf2eb;
  --pink: #cb4f84;
  --pink-soft: #f5dce6;
  --tag-text: #9c2f5e;
  --on-accent: #ffffff;
  --ghost: #a88a74;
  --warn-bg: #f7dccf;
  --warn-text: #8e3416;

  --line: rgba(58, 39, 32, .14);
  --blob-1: rgba(175, 100, 60, .10);
  --blob-2: rgba(203, 79, 132, .08);
  --logo-op: .07;
  --logo-fill-op: .22;
  --shadow: 0 24px 60px -20px rgba(58, 39, 32, .35);
  --shadow-soft: 0 8px 24px -14px rgba(58, 39, 32, .35);
  --head-bg: rgba(234, 219, 205, .86);
  --head-border: rgba(201, 173, 152, .6);
  --veil: rgba(44, 33, 28, .45);

  --device: #2c211c;
  --device-light: #4a3a33;
  --device-edge: rgba(255, 255, 255, .07);
  --device-shadow: 0 30px 60px -24px rgba(58, 39, 32, .55);
  --glare: rgba(255, 255, 255, .16);
  --glow: rgba(203, 79, 132, .13);
  --floor: rgba(58, 39, 32, .35);

  /* La «G» de Google en colores de Backpack (ui/google.js). */
  --g-a: #e0a985;
  --g-b: #cb4f84;
  --g-c: #af643c;
  --g-d: #3a2720;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #211916;
  --surface: #30231e;
  --surface-2: #2a1d19;
  /* De noche, el CONTORNO (--border) de tarjetas, opciones, campos y botones se aclara hasta ~3:1
     contra el fondo y la superficie: con el tono de las líneas divisorias todo se camuflaba. Las
     líneas que solo separan usan --divider, más tenue. Y las opciones que se tocan van «en
     relieve» (--raised, más claras que la tarjeta) y no hundidas como de día. */
  --border: #937261;
  --divider: #705344;
  --raised: #3c2b24;
  --text: #fff5eb;
  --muted: #cfbaaa;
  --accent: #c28760;
  --accent-text: #e0a985;
  --ink: #e9bdcd;
  --ink-text: #2c1c19;
  --pink: #e16b9d;
  --pink-soft: #483126;
  --tag-text: #f2c9d8;
  --on-accent: #211916;
  --ghost: #88634e;
  --warn-bg: #4a2a1e;
  --warn-text: #ffc2a6;

  --line: rgba(255, 245, 235, .09);
  --blob-1: rgba(194, 135, 96, .10);
  --blob-2: rgba(225, 107, 157, .07);
  --logo-op: .10;
  --logo-fill-op: .30;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --shadow-soft: 0 8px 24px -14px rgba(0, 0, 0, .6);
  --head-bg: rgba(33, 25, 22, .86);
  --head-border: rgba(112, 83, 68, .6);
  --veil: rgba(0, 0, 0, .6);

  --device: #0d0908;
  --device-light: #2a201c;
  --device-edge: rgba(255, 255, 255, .09);
  --device-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
  --glare: rgba(255, 255, 255, .07);
  --glow: rgba(225, 107, 157, .10);
  --floor: rgba(0, 0, 0, .55);

  --g-a: #e0a985;
  --g-b: #e16b9d;
  --g-c: #c28760;
  --g-d: #fff5eb;
}