/* ============================================================
   VARIABLES.CSS — Design Tokens para Laboratorio BIOBLAS
   Fuente: Brandbook oficial (BB BRANDBOOK)
   ============================================================ */

/* --- @font-face: Aventa (self-hosted) --- */
/* Si no se dispone de archivos .woff2, cargar Inter como fallback desde Google Fonts */

/* Aventa Light */
@font-face {
  font-family: 'Aventa';
  src: url('/assets/fonts/aventa/Aventa-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Aventa Light Italic */
@font-face {
  font-family: 'Aventa';
  src: url('/assets/fonts/aventa/Aventa-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Aventa Medium */
@font-face {
  font-family: 'Aventa';
  src: url('/assets/fonts/aventa/Aventa-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Aventa Bold */
@font-face {
  font-family: 'Aventa';
  src: url('/assets/fonts/aventa/Aventa-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {

  /* ============================================================
     COLORES — Paleta Principal (Brandbook p.5)
     ============================================================ */
  --color-primary:         #1C2E53;   /* Azul marino corporativo */
  --color-primary-rgb:     28, 46, 83;
  --color-primary-light:   #2A4070;   /* Hover sobre primario */
  --color-primary-dark:    #0F1A30;   /* Footer, secciones oscuras */
  --color-silver:          #BCBEC0;   /* Gris plata del Brandbook */
  --color-surface:         #FFFFFF;   /* Blanco puro */
  --color-surface-alt:     #F8FAFB;   /* Fondo alterno suave */

  /* Colores funcionales */
  --color-accent:          #1C2E53;   /* Azul marino corporativo como acento core */
  --color-accent-rgb:      28, 46, 83;
  --color-accent-light:    #2A4070;   /* Hover sobre acento (Navy más suave) */
  --color-accent-soft:     rgba(28, 46, 83, 0.05); /* Fondo azul marino muy suave */

  /* Texto */
  --color-text:            #1C2E53;   /* Texto principal = azul marino */
  --color-text-muted:      #6B7280;   /* Texto secundario */
  --color-text-light:      #9CA3AF;   /* Texto terciario / placeholders */
  --color-text-inverse:    #FFFFFF;   /* Texto sobre fondos oscuros */

  /* Bordes y separadores */
  --color-border:          #E5E7EB;
  --color-border-strong:   #D1D5DB;
  --color-divider:         #F3F4F6;

  /* Feedback */
  --color-success:         #059669;
  --color-success-soft:    #ECFDF5;
  --color-error:           #DC2626;
  --color-error-soft:      #FEF2F2;
  --color-warning:         #D97706;
  --color-warning-soft:    #FFFBEB;


  /* ============================================================
     COLORES POR PRODUCTO (Brandbook p.6, p.13-14)
     ============================================================ */

  /* Linea Mascotas */
  --color-product-m1:      #68C1C4;   /* BIOmix M1 — Mascotas */

  /* Agua y Suelo */
  --color-product-ba:      #59BBDD;   /* BIOaqua */
  --color-product-bp:      #2B7C7C;   /* BIOprobiotic */

  /* Linea Acuicola */
  --color-product-l2:      #85C6A1;   /* BIOmix L2 — Postlarvas camaron */
  --color-product-f:       #D34E28;   /* BIOmix F/F1/F2 — Peces */
  --color-product-s:       #8D1822;   /* BIOmix S/S1/S2 — Camarones */

  /* Linea Agropecuaria */
  --color-product-bc1:     #F6B01A;   /* BIOmix BC1 — Pollos de engorde */
  --color-product-p1:      #E7A8A6;   /* BIOmix P1 — Ganado porcino */
  --color-product-c1:      #C32827;   /* BIOmix C1 — Gallinas ponedoras */
  --color-product-r1:      #7F3B32;   /* BIOmix R1 — Rumiantes */
  --color-product-h1:      #161817;   /* BIOmix H1 — Equinos */
  --color-product-d1:      #FEFEFA;   /* BIOmix D1 — Rumiantes lecheros */

  /* Colores de linea (para secciones/headers de categoria) */
  --color-line-mascotas:   #68C1C4;
  --color-line-agua:       #59BBDD;
  --color-line-acuicola:   #85C6A1;
  --color-line-agro:       #F6B01A;


  /* ============================================================
     TIPOGRAFIA — Aventa (Brandbook p.4) + fallback Inter
     ============================================================ */
  --font-primary:    'Aventa', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  /* Escala tipografica */
  --text-xs:         0.75rem;     /* 12px */
  --text-sm:         0.875rem;    /* 14px */
  --text-base:       1rem;        /* 16px */
  --text-lg:         1.125rem;    /* 18px */
  --text-xl:         1.25rem;     /* 20px */
  --text-2xl:        1.5rem;      /* 24px */
  --text-3xl:        1.875rem;    /* 30px */
  --text-4xl:        2.25rem;     /* 36px */
  --text-5xl:        3rem;        /* 48px */
  --text-6xl:        3.75rem;     /* 60px */
  --text-7xl:        4.5rem;      /* 72px */

  /* Pesos (Aventa) */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;

  /* Line-heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;


  /* ============================================================
     ESPACIADO — Escala 8px
     ============================================================ */
  --space-2xs:       2px;
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        32px;
  --space-2xl:       48px;
  --space-3xl:       64px;
  --space-4xl:       80px;
  --space-5xl:       100px;
  --space-6xl:       128px;


  /* ============================================================
     SOMBRAS
     ============================================================ */
  --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg:       0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl:       0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-2xl:      0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow-inner:    inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Sombra con tinte de marca */
  --shadow-primary:  0 4px 16px rgba(28, 46, 83, 0.15);
  --shadow-accent:   0 4px 16px rgba(var(--color-accent-rgb), 0.15);


  /* ============================================================
     RADIOS
     ============================================================ */
  --radius-xs:       4px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-2xl:      32px;
  --radius-full:     9999px;


  /* ============================================================
     TRANSICIONES
     ============================================================ */
  --transition-fast:    0.15s ease;
  --transition-default: 0.3s ease;
  --transition-slow:    0.5s ease;
  --transition-spring:  0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Ease presets */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);


  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-below:         -1;
  --z-base:          1;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-navbar:        500;
  --z-overlay:       900;
  --z-modal:         1000;
  --z-tooltip:       1100;
  --z-toast:         1200;


  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max:   1200px;
  --container-pad:   24px;
  --navbar-height:   72px;
  --footer-pad:      64px;

  /* Grid gaps */
  --grid-gap-sm:     16px;
  --grid-gap-md:     24px;
  --grid-gap-lg:     32px;


  /* ============================================================
     BREAKPOINTS (referencia, no se pueden usar en var())
     480px  — Mobile L
     768px  — Tablet
     1024px — Desktop
     1440px — Desktop L
     ============================================================ */
}