@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
/*
 * Hidrocarburos del Norte — Design Tokens
 * Sistema de diseño: Petroleum + Fuel Gold + Limestone
 * Tipografía: Oswald (display/marca, condensada e industrial) + Inter (cuerpo)
 * ─────────────────────────────────────────────────────
 * Cómo usar:
 *   Siempre referenciar variables, nunca valores directos.
 *   ✓ color: var(--text-primary)
 *   ✗ color: #0C1B2E
 */

/* ═══════════════════════════════════════════
   PALETA BASE — valores fijos, no cambian
═══════════════════════════════════════════ */
:root {
  /* Escala oscura */
  --color-petroleum-900: #060F1A;
  --color-petroleum-800: #0C1B2E;   /* fondo principal dark */
  --color-petroleum-700: #122540;
  --color-petroleum-600: #163352;   /* sección alternativa dark */
  --color-petroleum-500: #1E4470;

  /* Dorado — acento único de la marca */
  --color-gold-400: #F5CC2A;
  --color-gold-500: #E8B400;        /* acento principal */
  --color-gold-600: #C49A00;        /* hover / pressed */
  --color-gold-700: #9C7900;        /* texto sobre fondo claro */

  /* Escala clara */
  --color-limestone-100: #FAFAF8;
  --color-limestone-200: #F4F2EC;   /* fondo principal light */
  --color-limestone-300: #E8E5DE;
  --color-limestone-400: #D0CBC0;

  /* Slate — textos secundarios */
  --color-slate-400: #8FA3B5;
  --color-slate-500: #6A7D8F;
  --color-slate-600: #4E6070;
  --color-slate-700: #354858;

  /* Semáforo — solo para estados, nunca como acento */
  --color-success: #2A8C6E;
  --color-warning: #D46B0A;
  --color-danger:  #C0392B;
}

/* ═══════════════════════════════════════════
   TOKENS SEMÁNTICOS — TEMA CLARO (default)
═══════════════════════════════════════════ */
:root {
  /* Superficies */
  --bg:            var(--color-limestone-200);
  --bg-alt:        var(--color-limestone-100);
  --surface-dark:  var(--color-petroleum-800);
  --surface-mid:   var(--color-petroleum-600);
  --surface-card:  var(--color-limestone-100);

  /* Texto */
  --text-primary:   var(--color-petroleum-800);
  --text-secondary: var(--color-slate-500);
  --text-muted:     var(--color-slate-400);
  --text-inverse:   var(--color-limestone-200);
  --text-inverse-muted: var(--color-slate-400);

  /* Acento */
  --accent:         var(--color-gold-500);
  --accent-hover:   var(--color-gold-600);
  --accent-text:    var(--color-gold-700);  /* dorado legible sobre blanco */

  /* Bordes */
  --border:         var(--color-limestone-300);
  --border-subtle:  var(--color-limestone-400);
  --border-accent:  rgba(232, 180, 0, 0.25);

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(12, 27, 46, 0.08);
  --shadow-md: 0 4px 12px rgba(12, 27, 46, 0.12);
  --shadow-lg: 0 8px 28px rgba(12, 27, 46, 0.16);
}

/* ═══════════════════════════════════════════
   TOKENS SEMÁNTICOS — TEMA OSCURO
═══════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            var(--color-petroleum-800);
    --bg-alt:        var(--color-petroleum-600);
    --surface-dark:  var(--color-petroleum-900);
    --surface-mid:   var(--color-petroleum-800);
    --surface-card:  rgba(255, 255, 255, 0.04);

    --text-primary:   var(--color-limestone-200);
    --text-secondary: var(--color-slate-400);
    --text-muted:     var(--color-slate-600);
    --text-inverse:   var(--color-limestone-200);

    --accent:         var(--color-gold-500);
    --accent-hover:   var(--color-gold-400);
    --accent-text:    var(--color-gold-400);

    --border:         rgba(255, 255, 255, 0.08);
    --border-subtle:  rgba(255, 255, 255, 0.05);
    --border-accent:  rgba(232, 180, 0, 0.20);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.50);
  }
}

/* Override explícito via data-theme (toggle manual) */
:root[data-theme="dark"] {
  --bg:            var(--color-petroleum-800);
  --bg-alt:        var(--color-petroleum-600);
  --surface-dark:  var(--color-petroleum-900);
  --surface-mid:   var(--color-petroleum-800);
  --surface-card:  rgba(255, 255, 255, 0.04);
  --text-primary:   var(--color-limestone-200);
  --text-secondary: var(--color-slate-400);
  --text-muted:     var(--color-slate-600);
  --accent:         var(--color-gold-500);
  --accent-hover:   var(--color-gold-400);
  --accent-text:    var(--color-gold-400);
  --border:         rgba(255, 255, 255, 0.08);
  --border-subtle:  rgba(255, 255, 255, 0.05);
  --border-accent:  rgba(232, 180, 0, 0.20);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.50);
}

:root[data-theme="light"] {
  --bg:            var(--color-limestone-200);
  --bg-alt:        var(--color-limestone-100);
  --surface-dark:  var(--color-petroleum-800);
  --surface-mid:   var(--color-petroleum-600);
  --surface-card:  var(--color-limestone-100);
  --text-primary:   var(--color-petroleum-800);
  --text-secondary: var(--color-slate-500);
  --text-muted:     var(--color-slate-400);
  --accent:         var(--color-gold-500);
  --accent-hover:   var(--color-gold-600);
  --accent-text:    var(--color-gold-700);
  --border:         var(--color-limestone-300);
  --border-subtle:  var(--color-limestone-400);
  --border-accent:  rgba(232, 180, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(12, 27, 46, 0.08);
  --shadow-md: 0 4px 12px rgba(12, 27, 46, 0.12);
  --shadow-lg: 0 8px 28px rgba(12, 27, 46, 0.16);
}

/* ═══════════════════════════════════════════
   TIPOGRAFÍA
═══════════════════════════════════════════ */
:root {
  /* Familias */
  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;   /* títulos e impacto */
  --font-brand:   "Oswald", "Arial Narrow", system-ui, sans-serif;   /* wordmark de marca */
  --font-body:    "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Courier New", Courier, monospace;

  /* Escala (fluid via clamp) */
  --text-xs:   0.70rem;    /* 11px — labels, eyebrows */
  --text-sm:   0.825rem;   /* 13px — notas, captions */
  --text-base: 0.9375rem;  /* 15px — cuerpo principal */
  --text-lg:   1.125rem;   /* 18px — lead / intro */
  --text-xl:   1.375rem;   /* 22px — subheadings */
  --text-2xl:  clamp(1.5rem, 3vw, 2rem);
  --text-3xl:  clamp(1.9rem, 4vw, 2.8rem);
  --text-4xl:  clamp(2.4rem, 5.5vw, 4rem);

  /* Pesos */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;
  --weight-black:  900;

  /* Interlineado */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.65;
  --leading-loose:  1.8;

  /* Tracking (letter-spacing) */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.22em;
}

/* ═══════════════════════════════════════════
   ESPACIADO — escala de 8px
═══════════════════════════════════════════ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Secciones */
  --section-padding-y: clamp(var(--space-12), 8vw, var(--space-24));
  --section-padding-x: clamp(var(--space-5), 5vw, var(--space-16));

  /* Contenedor máximo */
  --container-max: 1040px;
}

/* ═══════════════════════════════════════════
   BORDES Y RADIOS
═══════════════════════════════════════════ */
:root {
  --radius-sm:  2px;
  --radius-md:  4px;   /* radio estándar — industrial, no redondo */
  --radius-lg:  6px;
  --radius-pill: 100px;
}

/* ═══════════════════════════════════════════
   TRANSICIONES
═══════════════════════════════════════════ */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

/* ═══════════════════════════════════════════
   Z-INDEX
═══════════════════════════════════════════ */
:root {
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   300;
}