/* El material Bento, compartido por index.html y tarjeta.html.

   Urbanist, la letra del estilo Bento de la app (licencia OFL, fuentes/OFL.txt).
   Va servida desde acá mismo: la CSP solo deja `font-src 'self'` y la página
   no le pide nada a otro sitio. `swap`: mientras llega, se lee con la del
   sistema. */
@font-face { font-family: "Urbanist"; src: url("fuentes/Urbanist-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("fuentes/Urbanist-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("fuentes/Urbanist-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("fuentes/Urbanist-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("fuentes/Urbanist-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

/* El material Bento (`PaletaBento` en la app). Las tarjetas son oscuras
   siempre; el modo claro solo pinta el lienzo de afuera y el marco. */
:root {
  --lienzo: #141414;
  --lienzo-degradado: linear-gradient(135deg, #141414 0%, #1C1C1C 55%, #2E2E2E 72%, #181818 100%);
  --marco: #333333;
  --marco-ancho: 1px;
  --sobre-lienzo: #B4B4B4;
  --sobre-lienzo-fuerte: #F2F2F2;
  --sombra-ventana: 0 18px 40px rgba(0, 0, 0, .4);
  /* Opaco: sin desenfoque (regla del dueño), el texto que pasa por detrás
     se leía a través del dock. */
  --vidrio: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)), #181818;
  --filo-vidrio: rgba(255, 255, 255, .2);

  --ventana: #262626;
  --tarjeta: #3A3A3A;
  --dialogo: #2E2E2E;
  --campo: #2E2E2E;
  --filo-campo: #4A4A4A;
  --gris: #4A4A4A;
  --gris-fuerte: #5A5A5A;
  --circulo: rgba(255, 255, 255, .12);
  --claro: #E6E6E6;
  --tinta: #161616;
  --texto-b: #F2F2F2;
  --suave: #B4B4B4;

  --verde-b: #6EE7A0;
  --rojo-b: #FCA5A5;
  --ambar-b: #FCD34D;
  --violeta-b: #C4B5FD;
  --azul-b: #A5BEFF;

  --radio-ventana: 36px;
  --radio-tarjeta: 24px;
  --radio-dialogo: 30px;
  --sombra-tarjeta: 0 4px 12px rgba(0, 0, 0, .2);
  --letra: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --lienzo: #BDBDBD;
    --lienzo-degradado: linear-gradient(135deg, #BDBDBD 0%, #CFCFCF 55%, #EDEDED 72%, #C9C9C9 100%);
    --marco: #E3E3E3;
    --marco-ancho: 10px;
    --sobre-lienzo: #3A3A3A;
    --sobre-lienzo-fuerte: #161616;
    --sombra-ventana: 0 8px 28px rgba(0, 0, 0, .14);
    --vidrio: #262626;
  }
}