/* =========================================================================
   Bellota V2 — Design Tokens
   Variables globales de identidad. Referencia única.
   ========================================================================= */

:root {
    /* -----------------------------------------------------------
       COLOR — identidad Bellota (preservada del legacy)
       ----------------------------------------------------------- */
    --c-brand:            #b71c1c;    /* rojo Bellota primario */
    --c-brand-hover:      #db5050;
    --c-brand-dark:       #8a1414;
    --c-brand-alt:        #aa2e2e;
    --c-brand-soft:       #fce4e4;    /* fondo suave para banners */
    --c-brand-badge:      #f94848;    /* rojo brillante para badges/stats */

    /* Grises (jerarquía de texto y superficies) */
    --c-bg:               #f2f2f2;    /* fondo body */
    --c-surface:          #ffffff;    /* cards, secciones */
    --c-surface-alt:      #f7f7f7;    /* fondo sub-secciones */
    --c-border:           #e3e3e3;
    --c-border-soft:      #d8dbda;

    --c-text:             #222222;
    --c-text-strong:      #111111;
    --c-text-body:        #333333;    /* body por defecto */
    --c-text-muted:       #666666;
    --c-text-soft:        #887e7e;
    --c-text-inverse:     #ffffff;

    /* Estados semánticos */
    --c-success:          #16a34a;
    --c-warning:          #f59e0b;
    --c-danger:           #dc2626;
    --c-info:             #0891b2;

    /* -----------------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------------- */
    --font-sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-icons:         'bellota-icons';

    /* Escala tipográfica */
    --fs-xxs:             11px;
    --fs-xs:              12px;
    --fs-sm:              13px;
    --fs-base:            15px;
    --fs-md:              16px;
    --fs-lg:              18px;
    --fs-xl:              22px;
    --fs-2xl:             28px;
    --fs-3xl:             36px;
    --fs-4xl:             48px;
    --fs-hero:            56px;

    /* Line heights */
    --lh-tight:           1.15;
    --lh-snug:            1.35;
    --lh-normal:          1.55;
    --lh-relaxed:         1.7;

    /* Weights */
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-heavy:           800;

    /* -----------------------------------------------------------
       SPACING (escala 4px)
       ----------------------------------------------------------- */
    --sp-1:               4px;
    --sp-2:               8px;
    --sp-3:               12px;
    --sp-4:               16px;
    --sp-5:               20px;
    --sp-6:               24px;
    --sp-8:               32px;
    --sp-10:              40px;
    --sp-12:              48px;
    --sp-16:              64px;
    --sp-20:              80px;
    --sp-24:              96px;

    /* -----------------------------------------------------------
       RADIUS
       ----------------------------------------------------------- */
    --r-sm:               4px;
    --r-md:               6px;
    --r-lg:               10px;
    --r-xl:               16px;
    --r-full:             999px;

    /* -----------------------------------------------------------
       SHADOWS
       ----------------------------------------------------------- */
    --sh-sm:              0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
    --sh-md:              0 4px 8px -2px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
    --sh-lg:              0 12px 24px -8px rgba(0,0,0,0.12), 0 4px 8px -4px rgba(0,0,0,0.08);
    --sh-xl:              0 24px 48px -12px rgba(0,0,0,0.18);

    /* -----------------------------------------------------------
       TRANSITIONS
       ----------------------------------------------------------- */
    --t-fast:             0.15s ease-out;
    --t-base:             0.2s ease-out;
    --t-slow:             0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* -----------------------------------------------------------
       LAYOUT — Container widths (heredado del legacy)
       ----------------------------------------------------------- */
    --container-w-mobile: 90%;
    --container-w-desktop: 80%;
    --container-w-xl:     min(1300px, 68vw);

    /* Breakpoints (para media queries) */
    --bp-sm:              480px;
    --bp-md:              768px;
    --bp-lg:              992px;
    --bp-xl:              1400px;

    /* -----------------------------------------------------------
       Z-INDEX (jerarquía)
       ----------------------------------------------------------- */
    --z-header:           100;
    --z-dropdown:         200;
    --z-mega-menu:        150;
    --z-modal:            1000;
    --z-toast:            1100;
    --z-tooltip:          1200;
}