/* ========================================
   Design Tokens — Jade y piedra caliza
   Paleta derivada del logo Mayan World:
   verde #00693E, magenta #E8156B, lima #8DC63F.
   ======================================== */

:root {
    /* --- Escala de marca --- */
    --jade-950: #0B192C;   /* footer, bandas oscuras */
    --jade-900: #1A365D;   /* nav, botón secundario */
    --jade-800: #0a8974;   /* precios, cifras, hover del primario */
    --jade-700: #0c9f84;
    --jade-600: #0eb59a;   /* primario — color del logo */
    --jade-300: #7ae0cf;
    --jade-100: #e0f6f3;   /* fondos de icono, estado activo */

    --stone-50: #FAF7F1;   /* fondo de página */
    --stone-100: #F3EDE3;  /* bandas, chips */
    --stone-200: #E7DFD1;  /* bordes, separadores */
    --stone-400: #B9AE9B;  /* texto deshabilitado */

    --ink: #16201C;        /* texto principal */
    --muted: #5B6B62;      /* texto secundario */

    --magenta: #E8156B;    /* acento — glifo del logo. Máx. 1 por pantalla */
    --lima: #8DC63F;       /* solo sobre fondo jade oscuro */
    --crimson: #C2183C;    /* del logo; reservado para estados de error */
    --gold: #C9A227;       /* estrellas, avisos */

    /* --- Alias semánticos (nombres heredados, ya consumidos por
           main.css, style.css, hero.css, forms.css, cards.css,
           products-index.css y varias vistas PHP) --- */
    --primary-color: var(--jade-600);
    --primary-dark: var(--jade-800);
    --secondary-color: var(--muted);
    --success-color: #10b981;
    --danger-color: var(--crimson);
    --warning-color: var(--gold);
    --info-color: #2F7D6B;
    --light-color: var(--stone-50);
    --dark-color: var(--ink);

    /* Typography */
    --font-family-sans: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-family-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --font-size-base: 1rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --h1-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
    --h2-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
    --h3-size: clamp(1.4rem, 1.05rem + 1.2vw, 1.75rem);
    --h4-size: 1.25rem;
    --h5-size: 1rem;
    --h6-size: 0.875rem;
    /* Eyebrow: etiqueta pequeña en versalitas sobre cada sección */
    --eyebrow-size: 0.6875rem;
    --eyebrow-tracking: 0.28em;

    /* Spacing */
    --spacer: 1rem;
    --spacer-sm: 0.5rem;
    --spacer-lg: 1.5rem;
    --spacer-xl: 3rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 3rem;

    /* Borders — radios bajos: los radios grandes leen como plantilla */
    --border-radius: 5px;
    --border-radius-sm: 3px;
    --border-radius-lg: 6px;
    --border-radius-xl: 8px;
    --border-radius-pill: 999px;
    --border-color: var(--stone-200);

    /* Shadows — teñidas de jade, nunca negro puro */
    --shadow-sm: 0 2px 8px rgba(4, 35, 26, 0.06);
    --shadow: 0 10px 28px -12px rgba(4, 35, 26, 0.18);
    --shadow-lg: 0 26px 56px -28px rgba(4, 35, 26, 0.34);

    /* Scrim sobre fotografía: conserva la saturación de la selva,
       a diferencia del overlay negro al 70% */
    --scrim-hero: linear-gradient(180deg, rgba(4, 35, 26, 0.78) 0%, rgba(4, 35, 26, 0.22) 38%, rgba(4, 35, 26, 0.62) 100%);
    --scrim-card: linear-gradient(180deg, rgba(4, 35, 26, 0.0) 45%, rgba(4, 35, 26, 0.62) 100%);

    /* Transitions */
    --transition-base: all 0.2s ease-in-out;
    --transition-fast: all 0.15s ease-in-out;
    --transition-slow: all 0.3s ease-in-out;

    /* --- Puente hacia Bootstrap 5.3 ---
       El sitio carga bootstrap.min.css desde CDN (header.php) y sus
       componentes leen variables --bs-*, no las nuestras. Re-apuntarlas
       aquí es lo que hace que los tokens surtan efecto en enlaces,
       anillos de foco, utilidades .text-primary/.bg-primary, radios y
       el fondo del body.
       NOTA: .btn-primary, .navbar y .badge de Bootstrap traen su color
       compilado dentro de la clase, así que NO siguen a estas variables:
       necesitan una capa de override en main.css. */
    --bs-primary: var(--jade-600);
    --bs-primary-rgb: 14, 181, 154;
    --bs-primary-text-emphasis: var(--jade-800);
    --bs-primary-bg-subtle: var(--jade-100);
    --bs-primary-border-subtle: var(--jade-300);
    --bs-secondary: var(--muted);
    --bs-secondary-rgb: 91, 107, 98;
    --bs-danger: var(--crimson);
    --bs-danger-rgb: 194, 24, 60;
    --bs-warning: var(--gold);
    --bs-warning-rgb: 201, 162, 39;
    --bs-info: var(--info-color);
    --bs-info-rgb: 47, 125, 107;
    --bs-success: var(--success-color);
    --bs-light: var(--stone-100);
    --bs-light-rgb: 243, 237, 227;
    --bs-dark: var(--jade-950);
    --bs-dark-rgb: 4, 35, 26;

    --bs-body-bg: var(--stone-50);
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 22, 32, 28;
    /* inherit (el valor por defecto de Bootstrap): fijar un color aqui rompe
       los titulares dentro de bandas oscuras, que heredan el blanco del
       contenedor — p.ej. la seccion de newsletter. */
    --bs-heading-color: inherit;
    --bs-secondary-color: var(--muted);
    --bs-emphasis-color: var(--jade-950);
    --bs-body-font-family: var(--font-family-sans);

    --bs-link-color: var(--jade-600);
    --bs-link-color-rgb: 14, 181, 154;
    --bs-link-hover-color: var(--jade-800);
    --bs-link-hover-color-rgb: 10, 137, 116;

    --bs-border-color: var(--stone-200);
    --bs-border-radius: var(--border-radius);
    --bs-border-radius-sm: var(--border-radius-sm);
    --bs-border-radius-lg: var(--border-radius-lg);
    --bs-border-radius-xl: var(--border-radius-xl);
    --bs-border-radius-2xl: var(--border-radius-xl);
    --bs-border-radius-pill: var(--border-radius-pill);

    --bs-focus-ring-color: rgba(0, 105, 62, 0.22);
}