/* ============================================================
   Enciende y Grafica — tokens
   ------------------------------------------------------------
   Única fuente de verdad del diseño. La importan las dos caras
   del producto: styles.css (la guía) y src/index.css (el editor).
   Si un color, un tamaño o un radio no está aquí, no existe.
   ============================================================ */

:root {
  /* ---------------------------------------------- color: superficies */
  --papel:        #FCFCFD;   /* fondo de página */
  --papel-2:      #FFFFFF;   /* tarjetas, campos */
  --papel-hundido:#F2F3F8;   /* zonas rebajadas */
  --linea:        #E3E5EF;   /* bordes */
  --linea-fuerte: #CFD3E4;

  /* ---------------------------------------------- color: tinta */
  --tinta:        #0E1430;   /* texto principal */
  --tinta-media:  #3A4260;   /* cuerpo secundario */
  --tinta-suave:  #5D6580;   /* apoyo, metadatos */

  /* ---------------------------------------------- color: acento
     Un único azul. #001391 rinde 13,98:1 tanto como texto sobre
     blanco como de relleno con texto blanco encima, así que sirve
     para las dos cosas sin variantes de rescate. */
  --azul:         #001391;
  --azul-hover:   #00117E;
  --azul-activo:  #000E68;
  --azul-medio:   #4755B0;   /* 6,57:1 sobre blanco */
  --azul-linea:   #C7CBE7;
  --azul-suave:   #E0E3F2;
  --azul-tenue:   #F0F1F8;
  --sobre-azul:   #FFFFFF;   /* lo que va encima del relleno */

  /* ---------------------------------------------- color: semánticos */
  --alerta:       #B4522E;
  --alerta-suave: #FDF3F0;

  /* ---------------------------------------------- marcas
     Los únicos colores del sistema que no son de la marca propia:
     los logos de las tiendas van en el suyo o no se reconocen. */
  --marca-amazon: #FF9900;
  --marca-tiktok: #010101;

  /* ---------------------------------------------- fondo matemático */
  --formula:      var(--azul);
  --formula-op:   .07;       /* opacidad de las fórmulas */
  --trazo-op:     .11;       /* opacidad de las curvas */

  /* ---------------------------------------------- tipografía */
  --fuente: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-2xs: .6875rem;   /* 11px — contadores, microetiquetas */
  --t-xs:  .75rem;     /* 12px — etiquetas */
  --t-sm:  .875rem;    /* 14px — apoyo, botones */
  --t-md:  1rem;       /* 16px — cuerpo */
  --t-lg:  1.125rem;   /* 18px — entradilla */
  --t-xl:  1.375rem;   /* 22px — H3 */
  --t-2xl: 1.75rem;    /* 28px — H2 */
  --t-3xl: 2.25rem;    /* 36px — H1 interior */
  --t-4xl: clamp(2.25rem, 7vw, 3.25rem);  /* portada */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-fuerte: 600;
  --peso-titulo: 700;

  --alto-cuerpo: 1.6;
  --alto-titulo: 1.1;
  --track-cuerpo: -.006em;
  --track-titulo: -.022em;

  /* ---------------------------------------------- forma */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* ---------------------------------------------- controles */
  --alto-control:    2.75rem;   /* 44px — mínimo táctil */
  --alto-control-lg: 3.25rem;   /* 52px */
  --icono-sm: 1rem;      /* 16px */
  --icono-md: 1.25rem;   /* 20px */
  --icono-lg: 1.5rem;    /* 24px */
  --trazo-icono: 1.5;    /* el grosor nativo de Heroicons outline */

  /* ---------------------------------------------- profundidad */
  --sombra-1: 0 1px 2px rgba(14, 20, 48, .04), 0 10px 26px -18px rgba(14, 20, 48, .30);
  --sombra-2: 0 1px 2px rgba(14, 20, 48, .05), 0 18px 40px -20px rgba(14, 20, 48, .38);
  --sombra-azul: 0 1px 2px rgba(0, 19, 145, .10), 0 12px 26px -14px rgba(0, 19, 145, .45);

  /* ---------------------------------------------- medidas */
  --col: 40rem;

  /* ---------------------------------------------- material translúcido */
  --vidrio:       color-mix(in srgb, var(--papel-2) 70%, transparent);
  --vidrio-alto:  color-mix(in srgb, var(--papel-2) 90%, transparent);
  --vidrio-linea: color-mix(in srgb, var(--tinta) 10%, transparent);
  --desenfoque:   saturate(170%) blur(20px);
}

@media (min-width: 64rem) {
  :root { --col: 46rem; }
}

/* ============================================================
   Tema oscuro. El acento se aclara dentro de la MISMA familia
   (azul → periwinkle), nunca cambia de tono.
   Hoy index.html fuerza data-theme="light" hasta que el editor
   también tenga tema oscuro; estos valores ya están listos.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:        #0B1020;
    --papel-2:      #131A31;
    --papel-hundido:#080C19;
    --linea:        #222A45;
    --linea-fuerte: #333C5C;

    --tinta:        #EBEEF8;
    --tinta-media:  #C3C9DE;
    --tinta-suave:  #939BB8;

    --azul:         #8FA0F8;
    --azul-hover:   #A3B2FB;
    --azul-activo:  #B7C3FD;
    --azul-medio:   #7C8FF5;
    --azul-linea:   #2E3A6B;
    --azul-suave:   #1A2244;
    --azul-tenue:   #141B36;
    --sobre-azul:   #0B1020;

    --alerta:       #E0835F;
    --alerta-suave: #2A1A14;

    --marca-tiktok: #F1F3FB;

    --formula-op:   .10;
    --trazo-op:     .15;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 26px -18px rgba(0, 0, 0, .70);
    --sombra-2: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 40px -20px rgba(0, 0, 0, .75);
    --sombra-azul: 0 1px 2px rgba(0, 0, 0, .40), 0 12px 26px -14px rgba(143, 160, 248, .25);
  }
}

:root[data-theme="dark"] {
  --papel:        #0B1020;
  --papel-2:      #131A31;
  --papel-hundido:#080C19;
  --linea:        #222A45;
  --linea-fuerte: #333C5C;

  --tinta:        #EBEEF8;
  --tinta-media:  #C3C9DE;
  --tinta-suave:  #939BB8;

  --azul:         #8FA0F8;
  --azul-hover:   #A3B2FB;
  --azul-activo:  #B7C3FD;
  --azul-medio:   #7C8FF5;
  --azul-linea:   #2E3A6B;
  --azul-suave:   #1A2244;
  --azul-tenue:   #141B36;
  --sobre-azul:   #0B1020;

  --alerta:       #E0835F;
  --alerta-suave: #2A1A14;

  --marca-tiktok: #F1F3FB;

  --formula-op:   .10;
  --trazo-op:     .15;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 26px -18px rgba(0, 0, 0, .70);
  --sombra-2: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 40px -20px rgba(0, 0, 0, .75);
  --sombra-azul: 0 1px 2px rgba(0, 0, 0, .40), 0 12px 26px -14px rgba(143, 160, 248, .25);
}