:root {
  /* Primarios Principales (1:1 Pixel Perfect Match) */
  --color-naranja-cta: #EC6608;
  --color-naranja-rgb: 236 102 8;
  --color-naranja-hover: #d15606;
  --color-naranja-text: #C05004;
  /* High contrast text variant */
  --color-sj-oscuro: #1A202C;
  --color-oscuro-rgb: 26 32 44;
  --color-shadow-base: 0 0 0;
  --color-sj-institucional: #0082C6;
  /* Extracted from Bento Grid inline style */

  /* Fondos Globales */
  --color-bg-general: #F8F9FA;
  --color-bg-calido: #F0EEE8;
  --color-bg-highlight: #FFF5F0;
  --color-naranja-surface: #FFEEDD;

  /* Escala de Grises - Textos y Bordes */
  --color-gris-body: #4A5568;
  --color-gris-labels: #5F6C7B;
  --color-gris-bordes: #CBD5E1;
  --color-gris-claro: #E2E8F0;

  /* Estados semánticos */
  --color-success-bg: #E8F5E9;
  --color-success-text: #2E7D32;
  --color-error-bg: #FEF2F2;
  --color-error-text: #B91C1C;
  --color-error-border: #FECACA;

  /* Tipografías */
  --font-principal: 'Plus Jakarta Sans', sans-serif;
  --font-institucional: 'Ubuntu', sans-serif;

  /* Fluid Type Scale (clamp: min, preferred, max) */
  --text-hero: clamp(2.25rem, 6vw + 1rem, 4.5rem);
  /* H1 Hero: 36px → 72px (Reduced from 48px minimum) */
  --text-h2: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  /* H2 Section: 28px → 40px */
  --text-h3: clamp(1.25rem, 2vw + 0.25rem, 1.5rem);
  /* H3 Cards: 20px → 24px */

  /* Squircles (Apple Continuous Corner Smoothness) */
  --squircle-sm: 12px;
  /* Icons, Badges, Tooltips */
  --squircle-md: 18px;
  /* Inputs, Small nested cards */
  --squircle-lg: 32px;
  /* Main Cards, Hero Images (Superellipse proportion) */
  --squircle-pill: 9999px;
  /* Buttons, Tags */

  /* Sombras Custom (App-like Soft Shadows) */
  --shadow-soft: 0 4px 6px -1px rgb(var(--color-shadow-base) / 0.05), 0 2px 4px -1px rgb(var(--color-shadow-base) / 0.03);
  --shadow-xl-soft: 0 20px 25px -5px rgb(var(--color-shadow-base) / 0.05), 0 10px 10px -5px rgb(var(--color-shadow-base) / 0.02);

  /* Motion & Easing */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

/* ============================================================
   Accesibilidad: Focus Visible Global
   Reemplaza el outline por defecto del navegador con uno
   consistente con el sistema de diseño.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-naranja-cta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Accesibilidad: Prefers Reduced Motion
   Respeta la preferencia del sistema operativo del usuario.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-principal);
  color: var(--color-gris-body);
  background-color: var(--color-bg-general);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  font-family: var(--font-principal);
  color: var(--color-sj-oscuro);
}

h1, .text-hero {
  font-size: var(--text-hero) !important;
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

p,
.font-body {
  font-family: var(--font-principal);
}

/* Ubuntu — Voz del Gobierno de San Juan */
.font-institucional {
  font-family: var(--font-institucional);
}

/* Base Tailwind Config via Custom Configuration since we removed inline config */
/* Add global utilities just in case Tailwind CDN doesn't pick up everything automatically without a config file */
.text-sj-oscuro {
  color: var(--color-sj-oscuro);
}

.bg-sj-oscuro {
  background-color: var(--color-sj-oscuro);
}

.text-sj-naranja {
  color: var(--color-naranja-cta);
}

.text-sj-naranja-high {
  color: var(--color-naranja-text);
}

.hover\:text-sj-naranja-high:hover {
  color: var(--color-naranja-text);
}

.bg-sj-naranja {
  background-color: var(--color-naranja-cta);
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-xl-soft {
  box-shadow: var(--shadow-xl-soft);
}

/* Semantic text/bg utilities para evitar hex hardcodeados en el markup */
.text-sj-labels {
  color: var(--color-gris-labels);
  /* #5F6C7B */
}

.text-sj-body {
  color: var(--color-gris-body);
  /* #4A5568 */
}

.bg-sj-highlight {
  background-color: var(--color-bg-highlight);
  /* #FFF5F0 */
}

.text-sj-highlight {
  color: var(--color-bg-highlight);
  /* #FFF5F0 — usado en íconos decorativos */
}

.bg-sj-general {
  background-color: var(--color-bg-general);
  /* #F8F9FA */
}

.bg-sj-calido {
  background-color: var(--color-bg-calido);
  /* #F0EEE8 */
}

.bg-sj-naranja-tint {
  background-color: var(--color-naranja-surface);
  /* Tint claro del naranja para badges/pills */
}

.border-sj-light {
  border-color: var(--color-gris-claro);
  /* #E2E8F0 */
}

/* Utility: Border using mid-gray (for inputs, separators) */
.border-sj-bordes {
  border-color: var(--color-gris-bordes);
  /* #CBD5E1 */
}

/* Utilities: Semantic State — Success */
.bg-sj-success {
  background-color: var(--color-success-bg);
}

.text-sj-success {
  color: var(--color-success-text);
}

/* Utilities: Sticky CTA Shadow */
.shadow-sticky-top {
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
}