:root {
  --gold:        #c9a96e;
  --gold-dark:   #a0824d;
  /* Lo que va ENCIMA del dorado. Es el mismo en los tres temas y por
     eso vive aca arriba: el dorado es claro siempre, asi que el texto
     de un boton dorado tiene que ser oscuro siempre. Sin un nombre,
     esto termina como un #1a1a1a suelto en cada archivo -- y el dia
     que alguien lo cambia por var(--text) el boton queda ilegible en
     el tema claro. */
  --on-gold:     #1a1a1a;
  --fire:        #e8534f;
  --error:       #c44b4b;
  --green:       #22c55e;
  --warning:     #f59e0b;
  --blue-sys:    #3b82f6;
  --violet:      #9b59b6;

  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-full: 9999px;
  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 11px;
  --r-sm: 7px;
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #1a1a1a;
  --bg-surface:    #242424;
  --bg-card:       rgba(255,255,255,.035);
  --bg-hover:      rgba(255,255,255,.06);
  --text:          #faf9f7;
  --text-sub:      rgba(250,249,247,.68);
  --text-muted:    rgba(250,249,247,.55);
  --border:        rgba(250,249,247,.08);
  --border-accent: rgba(201,169,110,.22);

  /* Verde para TEXTO. --green es el verde de marca y sirve para
     bordes y fondos, pero como texto sobre un fondo claro da 2,17 de
     contraste -- ilegible. Medido: no hay un solo verde que sirva en
     los tres temas, asi que va uno por tema.

     EL NUMERO SE MIDE CONTRA LA PEOR SUPERFICIE, no contra el fondo de
     pagina. Un color puede pasar sobre --bg y no pasar sobre una
     tarjeta en hover, que es mas oscura: el primer verde que puse daba
     4,60 sobre --bg y 4,02 sobre --bg-hover, o sea pasaba o no segun
     donde cayera. Lo levanto la sesion de Gastro, que encontro
     exactamente eso en su dorado.
       claro  #146c34 -> peor 5,22   oscuro/marron #22c55e -> peor 5,71 */
  --green-text:    #22c55e;
  /* Dorado para TEXTO. Mismo caso que --green-text: --gold es el
     dorado de marca y va bien en bordes, fondos y botones, pero como
     texto sobre fondo claro da 2,13 -- y justo lo usan los numeros
     grandes, que son los que hay que poder leer.
       claro #7a5f30 -> 5,7      oscuro/marron #c9a96e -> 6,9 y 6,5 */
  --gold-text:     #c9a96e;
  /* Azul para TEXTO. Mismo caso que --green-text y --gold-text:
     --blue-sys es el azul de sistema y sirve para bordes y fondos,
     pero como texto no llega en ningun tema. Lo usa la chapita del
     plan STD, que va sobre su propio fondo azul al 12%, asi que se
     midio contra ESE fondo compuesto sobre las 6 superficies (bg,
     surface, y card/hover sobre las dos), no contra el fondo de
     pagina. El #60a5fa que traia la maqueta daba 4,45 en oscuro y
     3,99 en marron: no llegaba.
       claro #1e40af -> peor 6,20    oscuro #93c5fd -> 6,27    marron -> 5,62 */
  --blue-text:     #93c5fd;
  --warning-text:  #f59e0b;
  --error-text:    #f08b8b;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:            #f7f5f0;
  --bg-surface:    #faf9f7;
  --bg-card:       rgba(26,26,26,.04);
  --bg-hover:      rgba(26,26,26,.07);
  --text:          #1a1a1a;
  --text-sub:      rgba(26,26,26,.72);
  --text-muted:    rgba(26,26,26,.65);
  --border:        rgba(26,26,26,.1);
  --border-accent: rgba(160,130,77,.35);
  --green-text:    #146c34;
  --gold-text:     #7a5f30;
  --blue-text:     #1e40af;
  --warning-text:  #96500a;
  --error-text:    #b3261e;
}

:root[data-theme="brown"] {
  color-scheme: dark;
  --bg:            #2b1d14;
  --bg-surface:    #35261b;
  --bg-card:       rgba(255,224,190,.05);
  --bg-hover:      rgba(255,224,190,.09);
  --text:          #f5ece0;
  --text-sub:      rgba(245,236,224,.7);
  --text-muted:    rgba(245,236,224,.6);
  --border:        rgba(245,236,224,.1);
  --border-accent: rgba(201,169,110,.3);
  --green-text:    #22c55e;
  --gold-text:     #c9a96e;
  --blue-text:     #93c5fd;
  --warning-text:  #f59e0b;
  --error-text:    #f08b8b;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:            #f7f5f0;
    --bg-surface:    #faf9f7;
    --bg-card:       rgba(26,26,26,.04);
    --bg-hover:      rgba(26,26,26,.07);
    --text:          #1a1a1a;
    --text-sub:      rgba(26,26,26,.72);
    --text-muted:    rgba(26,26,26,.65);
    --border:        rgba(26,26,26,.1);
    --border-accent: rgba(160,130,77,.35);
    --green-text:    #146c34;
    --gold-text:     #7a5f30;
    --blue-text:     #1e40af;
    --warning-text:  #96500a;
    --error-text:    #b3261e;
  }
}

* { box-sizing: border-box; }

/* El popup nativo de <select> no hereda el fondo del tema (el navegador
   lo pinta blanco por su cuenta) -- sin esto, texto claro sobre blanco
   queda invisible salvo en la fila resaltada en azul por el sistema. */
select option {
  background: var(--bg-surface);
  color: var(--text);
}

/* NO SE MUEVE PARA EL COSTADO, PERO SIGUE SIENDO LA VENTANA LA QUE
   SCROLLEA.

   Estaba en `overflow-x: hidden` y eso tiene un efecto que no se ve
   hasta que alguien lo necesita: `hidden` convierte a `html`/`body` en
   SU PROPIO contenedor de scroll, y ahí `position: sticky` deja de
   pegarse a la ventana. Apareció en el manual --Canu: «me gustaría que
   si sigo scrolleando, la barra lateral me acompañe hasta abajo»--:
   el índice era sticky desde el principio y se iba igual, porque el
   sticky no tenía contra qué pegarse.

   `clip` corta lo que se sale para el costado exactamente igual, pero
   NO crea contenedor de scroll. Se dejan los dos: el navegador viejo
   que no conoce `clip` ignora esa línea y se queda con `hidden`, o sea
   como estaba. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
  overflow-x: clip;
}