/* ==============================================
   tokens.css — Design tokens globales ASOPETROL
   Rama: feat/design-tokens + feat/theme-toggle
   ----------------------------------------------
   Paleta base (artifact Claude, 2026-08-24):
   - Marca: naranja #FF6900, azul #001A27.
   - :root = TEMA OSCURO (default). El tema claro
     redefine solo las variables semánticas en
     [data-theme="light"]. Las de marca NO cambian.
   - Reglas de la paleta:
     * Naranja = acento, nunca fondo grande.
     * Texto naranja sobre claro → #A84400.
     * Texto sobre botón naranja → BLANCO (decisión de Wendy 2026-08-24;
       la paleta sugería #001A27, se revierte a blanco en todos los botones).
     * Sin blanco puro ni negro puro (excepto botones naranjas).
     * Máximo 2 niveles de fondo por pantalla
       (base + tarjeta; el "hundido" solo separa secciones).
   ============================================== */

:root {
  /* ---------- Marca ---------- */
  --color-primary: #001A27;        /* azul institucional (ex #00263A) */
  --color-accent: #FF6900;         /* naranja institucional */
  --color-accent-strong: #FF9147;  /* naranja hover/light (ex #FF8C33) */
  --color-dark: #001A27;           /* azul profundo de marca (ex #001119) */
  --color-blue: #06202D;           /* azul secundario (superficie elevada) */

  /* ---------- Acento (reglas de la paleta) ---------- */
  --accent-text: #FF9147;          /* naranja como TEXTO sobre superficies oscuras;
                                      el tema claro lo redefine a #A84400 */
  --accent-on-brand: #FF9147;      /* texto naranja sobre azul de marca FIJO
                                      (footer, login-brand) — no cambia con el tema */
  --accent-tint: #1F2422;          /* fondo suave del acento (dark);
                                      light redefine a #FFF0E6 */
  --accent-soft: var(--accent-tint);   /* chips, avatares, play buttons, badges */
  --accent-ghost: rgba(255, 105, 0, 0.08);  /* hover links navbar/dropdown */
  --accent-line: rgba(255, 105, 0, 0.2);    /* línea conectora de pasos (CTA) */
  --accent-outline: rgba(255, 105, 0, 0.2); /* borde badge firmado */
  --text-on-accent: #FFFFFF;       /* texto SOBRE botón/fondo naranja (blanco, decisión Wendy) */
  --text-on-brand: #EAF1F4;        /* texto sobre azul de marca fijo (cards azules, login) */
  --text-on-brand-soft: #9FB2BC;   /* texto secundario sobre azul de marca fijo */

  /* ---------- Superficies (tema oscuro) ---------- */
  --bg-page: #001A27;              /* fondo de página completa */
  --bg-band: #00131D;              /* "hundido": bandas/CTA/banner, separa secciones */
  --bg-card: #06202D;              /* tarjetas y superficies elevadas */
  --bg-surface: #06202D;           /* superficie (navbar scrolled, cards gallery) */
  --bg-surface-dark: #06202D;      /* alias legacy de --bg-card */
  --bg-muted: #00131D;             /* secciones alternas (marquee, gallery, services) */
  --bg-image-placeholder: #0D2937; /* placeholder galería (borde elevado) */
  --bg-blue-light: #F3FBFF;        /* ex --clr-blue-light */
  --bg-orange-light: #FFF9F5;      /* ex --clr-orange-light (content-2) */

  /* ---------- Texto (tema oscuro) ---------- */
  --text-nav: #EAF1F4;             /* links del navbar + menú mobile (sobre azul fijo) */
  --text-primary: #001A27;         /* azul de marca como texto (cards azules, hovers) */
  --text-muted: #9FB2BC;           /* subtítulos y metas */
  --text-muted-dark: #607884;      /* antetítulos/labels en mayúscula (subtle) */
  --text-placeholder: #607884;     /* valores vacíos en cursiva (admin) */
  --text-page: #EAF1F4;            /* títulos sobre fondo de página */
  --text-body: #9FB2BC;            /* párrafos sobre fondo de página */
  --text-muted-page: #607884;      /* meta/antetítulos sobre fondo de página */
  --text-on-dark: #EAF1F4;         /* texto claro sobre azul/oscuro (botones azules) */
  --text-on-dark-hint: rgba(255, 255, 255, 0.15);  /* footer decorativo (login) */
  --text-on-dark-soft: rgba(234, 241, 244, 0.75);  /* hero slider: descripciones */
  --text-on-dark-muted: rgba(234, 241, 244, 0.65); /* descripciones sobre oscuro */
  --text-on-dark-faint: rgba(234, 241, 244, 0.45); /* números de card, flechas */
  --text-on-dark-secondary: rgba(234, 241, 244, 0.65); /* descripción del CTA */
  --text-on-dark-tertiary: rgba(234, 241, 244, 0.5);   /* pasos del CTA */
  --text-on-dark-ghost: rgba(234, 241, 244, 0.35);     /* flechas decorativas */
  --text-on-dark-strong: rgba(234, 241, 244, 0.85);    /* cuerpo del footer */
  --text-on-dark-link: rgba(234, 241, 244, 0.7);       /* links sobre oscuro (footer) */
  --text-on-dark-subtle: rgba(234, 241, 244, 0.55);    /* descripción redes (footer) */

  /* ---------- Bordes (tema oscuro) ---------- */
  --border-card: #0D2937;          /* bordes de tarjetas */
  --border-subtle: #0D2937;        /* cards sobre claro / toggle navbar */
  --border-on-dark: #0D2937;       /* header scrolled, footer, dropdown */
  --border-on-dark-strong: rgba(234, 241, 244, 0.35); /* botones del hero slider */
  --border-on-dark-mid: rgba(234, 241, 244, 0.18);    /* bordes dashed firma */
  --border-on-dark-soft: rgba(234, 241, 244, 0.12);   /* borde del mapa (footer) */
  --border-on-dark-faint: rgba(234, 241, 244, 0.07);  /* bordes ultra tenues */
  --bg-on-dark: rgba(234, 241, 244, 0.08);            /* fondos sutiles (botones redes) */
  --bg-on-dark-faint: rgba(234, 241, 244, 0.03);      /* filas/headers de tabla */

  /* ---------- Acentos translúcidos (estados/hovers) ---------- */
  --primary-soft: rgba(0, 26, 39, 0.18);   /* hover ícono services */
  --color-dark-glass: rgb(0 17 25 / 52%);  /* sin uso actual (limpiar en fase 1.5) */

  /* ---------- Tipografía ---------- */
  --font-sans: 'Public Sans', 'Helvetica', 'Arial', sans-serif;

  /* ---------- Radios ---------- */
  --radius-pill: 99px;
  --radius-card: 12px;
  --radius-btn: 0.2rem;

  /* ---------- Sombras ---------- */
  --shadow-hero: 0 24px 60px rgba(0, 17, 25, 0.45);
  --overlay: rgba(0, 0, 0, 0.7);              /* fondo de modales/popups */
  --shadow-nav: 0 8px 32px rgba(0, 17, 25, 0.45);       /* barra flotante del navbar */
  --shadow-dropdown: 0 16px 40px rgba(0, 0, 0, 0.5);    /* panel dropdown */
  --shadow-footer: 0 16px 48px rgba(0, 0, 0, 0.55);     /* footer flotante */

  /* ---------- Componentes (navbar) ---------- */
  --nav-logo-filter: none;   /* logo claro sobre barra oscura (scrolled dark);
                                el tema claro lo redefine a brightness(0) */
  --nav-dropdown-bg: var(--bg-surface-dark);  /* panel dropdown */
  --nav-dropdown-text: var(--text-page);      /* texto del panel dropdown */

  /* ---------- Layout ---------- */
  --nav-height: 94px;  /* altura real del header fijo: 70px de barra + 24px de margen flotante */

  /* ---------- Marcas externas (redes sociales) ----------
     Colores de marcas ajenas: NO cambian con el tema. */
  --brand-whatsapp: #25D366;
  --brand-instagram: #E1306C;
  --brand-twitter: #1DA1F2;
  --brand-facebook: #1877F2;
  --brand-linkedin: #0A66C2;

  /* ---------- Estados (acciones / resultados) ---------- */
  --color-success: #1DB954;                  /* verde éxito */
  --success-soft: rgba(29, 185, 84, 0.15);
  --success-outline: rgba(29, 185, 84, 0.25);
  --color-info: #3490DC;                     /* azul informativo */
  --info-soft: rgba(52, 144, 220, 0.15);
  --info-outline: rgba(52, 144, 220, 0.25);
  --color-warning: #FFC107;                  /* amarillo pendiente */
  --warning-soft: rgba(255, 193, 7, 0.15);
  --color-violet: #8B5CF6;                   /* violeta firmado */
  --violet-soft: rgba(139, 92, 246, 0.15);
  --color-danger: #E24B4A;                   /* rojo logout / rechazado */
  --danger-soft: rgba(226, 75, 74, 0.12);
  --danger-outline: rgba(226, 75, 74, 0.2);
  --warning-outline: rgba(255, 193, 7, 0.2);

  /* ============ ALIASES DE TRANSICIÓN ============
     Mantienen vivas las variables que YA usan
     styles.css / footer.css / navbar.css.
     Se eliminan cuando todo el sitio use los
     tokens semánticos de arriba. */
  --clr-black: #000000;
  --clr-white: #FFFFFF;
  --clr-grey-light: #FAFAFA;
  --clr-blue-light: var(--bg-blue-light);
  --clr-blue: var(--color-blue);
  --clr-blue-dark: var(--color-primary);
  --clr-orange-light: var(--bg-orange-light);
  --clr-orange: var(--color-accent);
}

/* ==============================================
   Tema claro — redefine solo variables
   semánticas (superficies, texto, bordes,
   acento-texto). La marca NO cambia.
   ============================================== */
[data-theme="light"] {
    /* Superficies — fondo casi blanco; tarjetas BLANCAS con borde suave */
    --bg-page: #F7FAFC;            /* fondo de página (casi blanco, sin gris azulado) */
    --bg-band: #EDF3F7;            /* "hundido": bandas/CTA/banner */
    --bg-card: #FFFFFF;            /* tarjetas: blancas con borde suave */
    --bg-surface: #FFFFFF;         /* navbar scrolled, cards gallery */
    --bg-muted: #EDF3F7;           /* secciones alternas (marquee, gallery) */

    /* Texto */
    --text-page: #001A27;          /* títulos (azul de marca) */
    --text-body: #45606E;          /* párrafos (AA 6.4:1) */
    --text-muted-page: #7A929E;    /* antetítulos/meta (solo decorativo) */
    --text-muted: #45606E;         /* subtítulos y metas */
    --text-primary: #001A27;       /* azul de marca como texto */
    --text-button: #001A27;        /* texto de la barra flotante del navbar (valor corregido: era #FFF0E6) */

    /* Acento (texto naranja sobre claro: AA 5.7:1) */
    --accent-text: #FF6900;
    --accent-tint: #FFF0E6;        /* fondo suave del acento */
    --accent-soft: var(--accent-tint);

    /* Bordes suaves */
    --border-card: #E2EAF0;
    --border-subtle: #E2EAF0;
    --border-on-dark: #E2EAF0;

    /* Sombras */
    --shadow-hero: 0 24px 60px rgba(0, 26, 39, 0.12);
    --shadow-nav: 0 8px 32px rgba(0, 26, 39, 0.1);
    --shadow-dropdown: 0 16px 40px rgba(0, 26, 39, 0.12);
    --shadow-footer: 0 16px 48px rgba(0, 26, 39, 0.1);

    /* Navbar: barra clara → logo y controles en oscuro */
    --nav-logo-filter: brightness(0);
    --nav-dropdown-bg: #FFFFFF;
    --nav-dropdown-text: #001A27;
}