/* =====================================================================
   tokens.css: colores, tipos, medidas y movimiento de la app.
   Son los de la web de Sumora (sumora-web/css/web.css y base.css), para que
   app y web se vean como una sola marca. El tema sigue al del teléfono.
   ===================================================================== */

@font-face{font-family:'Archivo';src:url(../fuentes/archivo.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(../fuentes/hanken-grotesk.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fuentes/instrument-serif-cursiva.woff2) format('woff2');font-style:italic;font-weight:400;font-display:swap}

:root{
  color-scheme:light dark;

  /* ---------- Color: tema claro ---------- */
  --fondo:#F7F6F3;                    /* fondo cálido de la web */
  --superficie:#FFFFFF;               /* tarjetas y hojas */
  --relleno:#EDECE8;                  /* botones suaves, buscador, segmentos */
  --relleno-activo:#FFFFFF;           /* opción elegida de un segmento */
  --tinta:#17181A;
  --tinta-2:#5E5F63;                  /* texto secundario (5.6:1 sobre el fondo) */
  --tinta-3:#6E6F73;                  /* marcadores de campo, notas (4.7:1) */
  --linea:rgba(23,24,26,.09);
  --ambar:#E8A13A;                    /* la barra alta del logo: acción principal */
  --ambar-texto:#8A5A0B;              /* ámbar legible como texto sobre claro */
  --sobre-ambar:#17181A;              /* texto sobre relleno ámbar (8.9:1) */
  --tarjeta-ambar:#FDF6EA;            /* bloque "Llevas" */
  --borde-ambar:rgba(232,161,58,.38);
  --ok:#248A3D;
  --peligro:#C1271B;
  --peligro-fondo:rgba(193,39,27,.09);
  --boton-fondo:#17181A; --boton-texto:#FFFFFF;
  --cristal:rgba(247,246,243,.8);
  --filo-cristal:rgba(255,255,255,.75);
  --velo:rgba(17,18,20,.42);          /* detrás de las hojas */
  --sombra-flotante:0 10px 30px -8px rgba(23,24,26,.22),0 2px 6px rgba(23,24,26,.06);
  --sombra-tarjeta:0 1px 2px rgba(23,24,26,.05);
  --logo-1:#17181A; --logo-2:#17181A; --logo-3:#E8A13A;
  --tarjeta-oscura:#17181A; --sobre-oscura:#F7F6F3; --sobre-oscura-2:rgba(247,246,243,.62);  /* tarjeta "Tu día" */
  --brillo:rgba(232,161,58,.16);      /* halo ámbar en lo alto de cada pantalla */
  /* Tonos apagados para avatares y tipos de activo (siempre con texto oscuro/claro legible). */
  --tono-1:#F3E3C7; --tinta-tono-1:#7A4E08;
  --tono-2:#DCE8DA; --tinta-tono-2:#2F5A2C;
  --tono-3:#DDE4EE; --tinta-tono-3:#2E4A6E;
  --tono-4:#EEDDE3; --tinta-tono-4:#7A3350;
  --tono-5:#E6E0F0; --tinta-tono-5:#4E3F75;
  --tono-6:#E2E6E3; --tinta-tono-6:#3F4A45;

  /* ---------- Tipografía ---------- */
  --letra-titulo:'Archivo',system-ui,sans-serif;
  --letra-texto:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
  --letra-acento:'Instrument Serif',Georgia,serif;

  /* ---------- Medidas ---------- */
  --margen:20px;                      /* margen lateral de las pantallas */
  --radio-tarjeta:22px;
  --radio-campo:14px;
  --radio-pildora:999px;
  --toque:44px;                       /* objetivo táctil mínimo */
  --seguro-arriba:env(safe-area-inset-top);
  --seguro-abajo:env(safe-area-inset-bottom);
  --alto-barra:calc(74px + var(--seguro-abajo));  /* barra de pestañas */

  /* ---------- Movimiento (los de la web) ---------- */
  --curva:cubic-bezier(.32,.72,0,1);
  --curva-salida:cubic-bezier(.22,1,.36,1);
  --anillo-foco:0 0 0 3px rgba(232,161,58,.55);

  /* ---------- Capas ---------- */
  --capa-barra:40; --capa-pantalla:60; --capa-hoja:80; --capa-aviso:90; --capa-cargando:95;
}

@media (prefers-color-scheme:dark){
  :root{
    --fondo:#111214;
    --superficie:#1A1B1E;
    --relleno:#25262A;
    --relleno-activo:#34353A;
    --tinta:#ECEBE7;
    --tinta-2:#A6A6A3;
    --tinta-3:#8E8E8B;
    --linea:rgba(236,235,231,.08);
    --ambar:#F0B457;
    --ambar-texto:#F0B457;
    --sobre-ambar:#17181A;
    --tarjeta-ambar:#231D13;
    --borde-ambar:rgba(240,180,87,.26);
    --ok:#30D158;
    --peligro:#FF6961;
    --peligro-fondo:rgba(255,105,97,.12);
    --boton-fondo:#ECEBE7; --boton-texto:#17181A;
    --cristal:rgba(26,27,30,.78);
    --filo-cristal:rgba(255,255,255,.07);
    --velo:rgba(0,0,0,.55);
    --sombra-flotante:0 12px 32px -6px rgba(0,0,0,.6);
    --sombra-tarjeta:none;
    --logo-1:#8C9096; --logo-2:#C9CDD2; --logo-3:#F0B457;
    --tarjeta-oscura:#232427; --sobre-oscura:#ECEBE7; --sobre-oscura-2:rgba(236,235,231,.6);
    --brillo:rgba(240,180,87,.10);
    --tono-1:#3A2E1A; --tinta-tono-1:#F2C47E;
    --tono-2:#233122; --tinta-tono-2:#9CCB95;
    --tono-3:#212B38; --tinta-tono-3:#9DB9DE;
    --tono-4:#36232B; --tinta-tono-4:#E3A1BA;
    --tono-5:#2A2538; --tinta-tono-5:#BDB0E3;
    --tono-6:#272B29; --tinta-tono-6:#B4BFB9;
  }
}