/* ==========================================================================
   PETROGESA - Design Tokens
   Fuente única de verdad para el sistema de diseño
   ========================================================================== */

:root {
  /* ========================================
     COLORES
     ======================================== */

  /* Primario - Dorado Petrogesa */
  --color-primary: #da8f26;
  --color-primary-dark: #b87520;
  --color-primary-light: #f0a832;
  --color-primary-rgb: 218, 143, 38;

  /* Secundario - Verde oscuro */
  --color-secondary: #1b2d26;
  --color-secondary-dark: #111e1a;
  --color-secondary-light: #253d34;

  /* Texto */
  --color-heading: #ffffff;
  --color-text: #677078;
  --color-text-muted: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-text-dark: #1b2d26;

  /* Fondos */
  --color-bg: #ffffff;
  --color-bg-alt: #f4f6f5;
  --color-bg-dark: #1b2d26;

  /* UI */
  --color-border: #e5e7eb;
  --color-overlay: rgba(27, 45, 38, 0.65);

  /* Estados */
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #f59e0b;

  /* ========================================
     TIPOGRAFÍA
     ======================================== */

  /* Familias */
  --font-heading: 'Geometos', 'Arial Black', sans-serif;
  --font-body: 'Grift', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tamaños - Mobile First */
  --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 */

  /* Line Heights */
  --leading-tight:   1.15;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Font Weights */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ========================================
     ESPACIADO
     ======================================== */

  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */

  /* ========================================
     LAYOUT
     ======================================== */

  --container-max:     1280px;
  --container-padding: var(--space-md);

  /* ========================================
     BORDES
     ======================================== */

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ========================================
     SOMBRAS
     ======================================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* ========================================
     TRANSICIONES
     ======================================== */

  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* ========================================
     Z-INDEX
     ======================================== */

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-fixed:   200;
  --z-modal:   300;

  /* ========================================
     NAVBAR
     ======================================== */

  --navbar-height:        54px;   /* altura de la cinta */
  --navbar-gap-top:       52px;   /* separación entre viewport y cintillo */
  --navbar-logo-size:     96px;   /* tamaño del logo cuadrado */
  --navbar-logo-overflow: 22px;   /* cuánto sobresale arriba Y abajo del cintillo */
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-lg);
    --navbar-height:        60px;
    --navbar-logo-size:     108px;
    --navbar-logo-overflow: 26px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding:    var(--space-xl);
    --navbar-height:        62px;
    --navbar-logo-size:     118px;
    --navbar-logo-overflow: 30px;
  }
}