/* ===========================================================================
 * Ovis — tokens de la vidriera (landing).
 *
 * La marca son dos colores y nada mas: tinta #111111 y crema #F2EDE4
 * (D:\Productos\secre-app\brand\README.md). Todo lo demas son mezclas de esos
 * dos. NO hay teal ni un tercer color: los generadores de imagen lo reinyectan,
 * aca no entra.
 *
 * La app usa su propio set (secre-app/src/app/globals.css); esto es solo la
 * vidriera. Ningun valor se escribe a mano en styles.css: sale de aca.
 * ======================================================================== */

@layer base {
  :root {
    /* Color — las dos de la marca */
    --tinta: #111111;
    --crema: #f2ede4;

    /* Mezclas de las dos (contraste medido en reports/contraste.txt) */
    --tinta-2: #1b1b1a;        /* superficie sobre tinta */
    --tinta-3: #262524;        /* borde sobre tinta */
    --crema-2: #e8e1d5;        /* superficie alterna sobre crema */
    --crema-3: #d6cdbe;        /* borde sobre crema */
    --papel: #faf8f4;          /* tarjeta sobre crema */

    --texto-sobre-crema: #111111;
    --suave-sobre-crema: #57524a;
    --texto-sobre-tinta: #f2ede4;
    --suave-sobre-tinta: #aaa49a;

    /* Tipografia — Satoshi (Fontshare) para todo, Instrument Serif italica
       para UNA palabra por titular. Inter/Plus Jakarta son de la app, no de la marca. */
    --fuente: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
    --fuente-acento: 'Instrument Serif', Georgia, serif;

    --t-xs: 0.8125rem;   /* 13 */
    --t-sm: 0.9375rem;   /* 15 */
    --t-base: 1.0625rem; /* 17 */
    --t-lg: 1.25rem;     /* 20 */
    --t-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    --t-2xl: clamp(2rem, 1.4rem + 3vw, 3.25rem);
    --t-3xl: clamp(2.6rem, 1.6rem + 5vw, 5rem);

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-fuerte: 700;
    --tracking-titular: -0.035em;
    --tracking-etiqueta: 0.12em;
    --interlinea: 1.55;
    --interlinea-titular: 1.02;

    /* Espacio (base 4) */
    --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
    --e-5: 1.5rem;  --e-6: 2rem;   --e-7: 3rem;    --e-8: 4.5rem; --e-9: 7rem;
    --gutter: 1rem;
    --ancho: 72rem;

    /* Forma — la O de la marca es redonda: radios generosos, botones pildora */
    --radio-sm: 0.625rem;
    --radio: 1.25rem;
    --radio-lg: 2rem;
    --radio-pildora: 999px;
    --alto-boton: 3.25rem;

    /* Movimiento */
    --curva: cubic-bezier(0.22, 1, 0.36, 1);
    --rapido: 160ms;
    --medio: 420ms;

    /* Superficies del navegador */
    --seleccion-fondo: #111111;
    --seleccion-texto: #f2ede4;
    --caret: #111111;
    --foco: 0 0 0 3px var(--crema), 0 0 0 5px var(--tinta);
    --foco-sobre-tinta: 0 0 0 3px var(--tinta), 0 0 0 5px var(--crema);
    --subrayado-offset: 0.22em;
  }

  @media (min-width: 48rem) {
    :root { --gutter: 2rem; }
  }
}