/* =====================================================================
   core.css — NÚCLEO INVISIBLE del sistema Pablo Diartínez
   Proporción Cordobesa c = 1.306.

   Separación física E1 (ratificada por). Este archivo es el
   ESQUELETO compartido por las SEIS marcas: geometría, rejilla, escalas de
   espacio y tamaño, tracking, radios, z-index, breakpoints.

   REGLA E1 — este archivo NO PINTA: sin color, sin familia tipográfica, sin
   textura, sin movimiento. Todo eso es piel de marca (brand-*.css). Ninguna
   marca redefine un token declarado aquí.

   Cada página del sistema carga EXACTAMENTE: core.css + un solo brand-*.css.
   Los @group/@name conservados permiten que el tooling del CMS (Lovable)
   introspeccione y construya sus controles de edición.
   ===================================================================== */

@layer tokens, primitives, semantic, components, utilities;

@layer tokens {
  :root {

    /**
     * @group grid.cordoban
     * @name "Rejilla cordobesa · celda apaisada (ancho = alto × c)"
     * @description Unidad de la rejilla editorial. Mediana = ½ celda; cuartas a
     *              ¼ y ¾ → 16 sub-celdas por celda. Geometría pura, sin color.
     */
    --cell-h:    103.97px; /* @kind spacing */ /* alto · 20.9 × c⁶ */
    --cell-w:    135.84px; /* @kind spacing */ /* ancho = alto × c */
    --mediana-h: 67.92px;  /* @kind spacing */ /* ½ ancho (eje vertical de la celda) */
    --mediana-v: 51.985px; /* @kind spacing */ /* ½ alto  (eje horizontal de la celda) */
    --subcell-w: 33.96px;  /* @kind spacing */ /* ¼ ancho · cell-w / 4 (snap de sub-celda) */
    --subcell-h: 25.9925px;/* @kind spacing */ /* ¼ alto  · cell-h / 4 (snap de sub-celda) */

    /**
     * @group spacing.gutter
     * @name "Rampa de medianiles · 3.97 × 1.306ⁿ"
     * @description Tres medianiles distintos, NO intercambiables. Todos derivan
     *              del gutter base 3.97 multiplicando por c. No confundir con
     *              --sp-* (padding interno de componentes).
     */
    --gutter:      3.97px;  /* @kind spacing */ /* base · padding de botón */
    --gutter-pill: 5.19px;  /* @kind spacing */ /* 3.97 × c   · entre pills del stack */
    /* MEDIANILES ASIMÉTRICOS — la rejilla usa dos medianiles INDEPENDIENTES para
       compensar que la celda (135.84 × 103.97) no es 4:3. Regla del sistema:
         1.5·cell-w + gutter-vertical  ≡  2·cell-h + gutter-horizontal  (= 219.51px)
       Así un módulo de 1.5 columnas × 2 filas es un CUADRADO exacto (219.51²). */
    --gutter-horizontal: 11.57px; /* @kind spacing */ /* medianil que separa FILAS (row-gap) · 3.97 × c⁴ */
    --gutter-vertical: calc(2 * var(--cell-h) + var(--gutter-horizontal) - 1.5 * var(--cell-w)); /* @kind spacing */ /* ≈15.75px · separa COLUMNAS (column-gap) · derivado de la regla 1:1 */

    /**
     * @group spacing
     * @name "Cordoban spacing scale · 4 × 1.306ⁿ"
     */
    --sp-0:  0;     /* @kind spacing */
    --sp-1:  3px;   --sp-2:  4px;   --sp-3:  5px;
    --sp-4:  7px;   --sp-5:  9px;   --sp-6:  12px;  --sp-7:  15px;
    --sp-8:  20px;  --sp-9:  26px;  --sp-10: 34px;  --sp-11: 44px;
    --sp-12: 58px;  --sp-13: 75px;  --sp-14: 98px;

    /**
     * @group type.scale
     * @name "Cordoban type ramp · 16 × 1.306ⁿ"
     * @description DOCE peldaños (n = -3 … +8) — TAMAÑOS, no familias. Saltar uno entre title
     *              y subtitle. La familia es piel de marca (brand-*.css).
     */
    --fs-nano:    7.2px;     /* n = -3 · peldaño inferior · pie de página legal */
    --fs-micro:   9.4px;     /* n = -2 */
    --fs-small:   12.3px;    /* n = -1 */
    --fs-base:    16px;      /* n =  0 · ancla de la rampa */
    --fs-lg:      20.9px;    /* n =  1 */
    --fs-h3:      27.3px;    /* n =  2 */
    --fs-h2:      35.6px;    /* n =  3 */
    --fs-h1:      46.5px;    /* n =  4 */
    --fs-display: 60.7px;    /* n =  5 */
    --fs-big:     79.4px;    /* n =  6 */
    --fs-huge:    103.7px;   /* n =  7 */
    --fs-marquee: 135.5px;   /* n =  8 */

    /**
     * @group type.weight
     * @name "Cordoban weight ladder"
     * @description Rampa de grosor (VALORES numéricos) anclada en el máximo del
     *              eje wght (900) y descendiendo ÷c por peldaño:
     *                900 · 689 · 527 · 404 · 309 · 237 · 181 · 139 · 106
     *              Son proporción cordobesa (como los tamaños), no familia. Cada
     *              marca los aplica a SU tipografía vía font-variation-settings.
     */
    --fw-thin:    237; /* @kind font */ /* suelo de Literata; Outfit/Inter siguen: 181 · 139 · 106 */
    --fw-light:   309; /* @kind font */
    --fw-regular: 404; /* @kind font */
    --fw-medium:  527; /* @kind font */
    --fw-bold:    689; /* @kind font */
    --fw-black:   900; /* @kind font */ /* ancla de la rampa = máximo del eje */

    /**
     * @group type.tracking
     * @name "Tracking ramp"
     * @description (E1 · destino CORE, ratificado) Métrica de proporción.
     *              Calibrada sobre Outfit; CADA MARCA puede reafinarla para su
     *              tipografía en su brand-*.css. Seis valores permitidos.
     */
    --tr-tight:   -0.01em; /* @kind font */
    --tr-body:     0;       /* @kind font */
    --tr-ui:       0.04em;  /* @kind font */
    --tr-label:    0.08em;  /* @kind font */
    --tr-display:  0.14em;  /* @kind font */
    --tr-marquee:  0.22em;  /* @kind font */

    /**
     * @group type.line-height
     * @name "Line heights"
     * @description REGLA B, ratificada por Pablo: la interlínea NO es un
     *              ratio libre — es una MEDIDA EN SUBCELDAS. El renglón se calibra
     *              para que un número entero de fracciones de subcelda (25.9925px)
     *              lo llene exactamente; de ahí sale el ratio, no al revés.
     *              El texto corrido de la LANDING es la calibración de referencia:
     *              un renglón de cuerpo base = UNA subcelda exacta. Por eso los
     *              titulares pueden bajar de 1: son tipos grandes en bandas poco
     *              profundas, no interlíneas «apretadas a ojo».
     */
    --lh-body:    1.6245; /* @kind font */ /* 1 subcelda (25.9925) ÷ fs-base (16)     · LANDING = ancla */
    --lh-ui:      1.2437; /* @kind font */ /* 1 subcelda (25.9925) ÷ fs-lg (20.9)     · antes 1.3 a ojo */
    --lh-heading: 1.0952; /* @kind font */ /* 1½ subceldas (38.99) ÷ fs-h2 (35.6)     · antes 1.12 a ojo */
    --lh-display: 0.9635; /* @kind font */ /* 2¼ subceldas (58.48) ÷ fs-display (60.7)· antes 0.95 a ojo */

    /**
     * @group grid.bands
     * @name "Bandas · las tres alturas que reparten UNA celda"
     * @description ( · corrección de Pablo) Las bandas de marquesina NO son
     *              una excepción: son la celda cordobesa repartida en tres.
     *              La media mide UNA SUBCELDA exacta; la pequeña, un peldaño de
     *              rampa por debajo; la grande cierra lo que falta hasta la
     *              celda. Suman 103.97 = --cell-h, sin sobra ni falta.
     *              Antes estaban escritas a mano (19.8 · 25.8 · 57.5) con nota
     *              de «no re-derivar» y se quedaban 0.87px cortas de cerrar la
     *              celda: la intención era correcta, el redondeo no.
     */
    --band-md: var(--subcell-h); /* @kind spacing */ /* 25.9925 · 1 subcelda */
    --band-sm: calc(var(--subcell-h) / 1.306); /* @kind spacing */ /* 19.902 · un peldaño por debajo */
    --band-lg: calc(var(--cell-h) - var(--band-md) - var(--band-sm)); /* @kind spacing */ /* 58.076 · cierra la celda */
    --band-2sub: calc(2 * var(--subcell-h)); /* @kind spacing */ /* 51.985 · banda de 2 subceldas (tienda, Fusion) */

    /**
     * @name "Control · altura canónica"
     * @description Altura de controles pequeños: el peldaño −1 crecido un paso
     *              cordobés (12.3 × 1.306 ≈ 16.1px). Derivación geométrica.
     */
    --control-h: calc(var(--fs-small) * 1.306); /* @kind other */

    /**
     * @name "Chrome · respiración lateral"
     * @description Margen lateral del chrome en PÁGINAS INTERIORES (medida
     *              estructural). La portada usa su propia respiración.
     *              DERIVADO DE LA REJILLA: media subcelda de alto. Antes
     *              era 14px escrito a mano — un valor huérfano. Diferencia real
     *              en pantalla: 1px. Pendiente del visto bueno de Pablo.
     */
    --chrome-inset: calc(var(--subcell-h) / 2); /* @kind spacing */ /* 12.996px */

    /**
     * @group radius
     * @name "Radii · binary"
     * @description (E1 · destino CORE, ratificado) La REGLA «0 o pastilla,
     *              nada intermedio» es del núcleo; CUÁL de las dos usa cada
     *              elemento es elección de marca. Cualquier 4–12px está prohibido.
     */
    --r-none: 0; /* @kind radius */
    --r-pill: 999px; /* @kind radius */

    /**
     * @group placeholder
     * @name "Placeholder universal"
     * @description (E1 · CORE, ratificado · D1) ÚNICA EXCEPCIÓN a la regla
     *              «el núcleo no pinta»: es un color, pero no pertenece a ninguna
     *              marca — es una SEÑAL DE SISTEMA («aquí falta una imagen»),
     *              idéntica en las seis. La excepción es deliberada, no un olvido.
     *              Toda imagen pendiente usa ESTE gris plano, sin texto dentro.
     */
    --gris-placeholder: #C8C8C8; /* @kind color */

    /**
     * @group z-index
     * @name "Z-index scale"
     * @description Escala discreta con huecos amplios. NO inventar valores fuera.
     */
    --z-base:    0;       /* @kind other */ /* flow normal */
    --z-raised:  10;      /* @kind other */ /* cards en hover, dropdowns inline */
    --z-sticky:  50;      /* @kind other */ /* nav sticky top */
    --z-drawer:  200;     /* @kind other */ /* cart drawer, modal sheets */
    --z-modal:   500;     /* @kind other */ /* full-screen modal */
    --z-toast:   800;     /* @kind other */ /* notifications, banners */
    --z-noise:   9000;    /* @kind other */ /* noise overlay (siempre encima del chrome) */
    --z-cursor:  10000;   /* @kind other */ /* cursor follower (siempre la capa más alta) */

    /**
     * @group breakpoints
     * @name "Responsive breakpoints"
     * @description Cuatro escalones del módulo cordobés. Mobile-first: usar
     *              @media (min-width: …) inlineando el valor (las custom props
     *              no funcionan dentro de @media).
     */
    --bp-mobile:  600px;   /* @kind other */ /* < 600 → single column */
    --bp-tablet:  900px;   /* @kind other */ /* 600–900 → tablet hybrid */
    --bp-desktop: 1200px;  /* @kind other */ /* 900–1200 → desktop nominal */
    --bp-wide:    1600px;  /* @kind other */ /* > 1600 → wide editorial */
  }
}