/**
 * Tierra de Gracia | Sistema de Diseño Editorial & Alta Gama
 * Tokens de diseño semánticos, paleta cromática de origen y tipografía de lujo
 */

/* Tipografías de Alta Gama (Con fallback garantizado para entorno 100% offline) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ==========================================================================
     PALETA CROMÁTICA: MAÍZ, BUDARE, QUESO & TIERRA
     ========================================================================== */
  
  /* Tonos Principales (Light Mode - Pergamino Cálido & Alta Gastronomía) */
  --color-primary: #A3381E;         /* Terracota Budare Asado */
  --color-primary-hover: #862B15;
  --color-primary-light: rgba(163, 56, 30, 0.08);
  --color-primary-subtle: rgba(163, 56, 30, 0.04);

  --color-gold: #D97706;            /* Ámbar Maíz Tostado */
  --color-gold-hover: #B45309;
  --color-gold-light: rgba(217, 119, 6, 0.12);
  --color-gold-subtle: rgba(217, 119, 6, 0.05);

  --color-secondary: #C85A17;       /* Fuego de Fogón */
  --color-secondary-hover: #A64710;
  --color-secondary-light: rgba(200, 90, 23, 0.1);

  --color-accent: #2E7D47;          /* Verde Guasacaca Fresca */
  --color-accent-hover: #1F5730;
  --color-accent-light: rgba(46, 125, 71, 0.1);

  /* Superficies y Fondos */
  --color-bg: #FAF7F2;              /* Marfil Pergamino Suave */
  --color-surface: #FFFFFF;         /* Blanco Nieve Puro */
  --color-surface-hover: #F5EFE6;
  --color-surface-alt: #F3ECE1;     /* Fondo de sección sutil */
  --color-surface-card: #FFFFFF;

  /* Tipografía y Contrastes */
  --color-text: #1C1917;            /* Carbón Cálido Profundo (Máximo Contraste WCAG) */
  --color-text-secondary: #44403C;  /* Carbón Medio para cuerpo editorial */
  --color-text-muted: #78716C;      /* Gris Piedra Cálido para metadatos */
  
  /* Bordes y Separadores de Alta Precisión */
  --color-border: rgba(68, 64, 60, 0.12);
  --color-border-subtle: rgba(68, 64, 60, 0.06);
  --color-border-hover: rgba(163, 56, 30, 0.28);
  --color-border-gold: rgba(217, 119, 6, 0.35);

  /* ==========================================================================
     TIPOGRAFÍA EDITORIAL (HERENCIA & ESCALADO)
     ========================================================================== */
  --font-display: 'Playfair Display', Didot, 'Bodoni MT', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Escala Modular Fluida */
  --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --font-size-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --font-size-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --font-size-2xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --font-size-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --font-size-hero: clamp(2.75rem, 2.25rem + 2.5vw, 4.25rem);

  /* ==========================================================================
     ESPACIADO & GEOMETRÍA
     ========================================================================== */
  --spacing-3xs: 0.25rem;
  --spacing-2xs: 0.5rem;
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4.5rem;
  --spacing-3xl: 6.5rem;

  --container-max: 1240px;
  --header-height: 78px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ==========================================================================
     SOMBRAS ATMOSFÉRICAS (Profundidad Natural sin Estilo Plastificado)
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 2px 8px -1px rgba(28, 25, 23, 0.06), 0 1px 3px -1px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 6px 20px -3px rgba(28, 25, 23, 0.07), 0 3px 8px -2px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 16px 36px -6px rgba(28, 25, 23, 0.09), 0 6px 16px -3px rgba(28, 25, 23, 0.05);
  --shadow-xl: 0 24px 54px -12px rgba(28, 25, 23, 0.14), 0 10px 24px -5px rgba(28, 25, 23, 0.06);
  --shadow-glow-gold: 0 0 28px rgba(217, 119, 6, 0.25);
  --shadow-glow-terracota: 0 0 30px rgba(163, 56, 30, 0.25);

  /* Transiciones Suaves */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 160ms var(--ease-out);
  --transition-base: 280ms var(--ease-out);
  --transition-slow: 450ms var(--ease-out);
}

/* ==========================================================================
   MODO NOCHE: FOGÓN CRIOLLO NOCTURNO
   ========================================================================== */
[data-theme="dark"] {
  --color-primary: #D95A3A;
  --color-primary-hover: #F26F4F;
  --color-primary-light: rgba(217, 90, 58, 0.15);
  --color-primary-subtle: rgba(217, 90, 58, 0.06);

  --color-gold: #F59E0B;
  --color-gold-hover: #FBBF24;
  --color-gold-light: rgba(245, 158, 11, 0.16);

  --color-secondary: #E07A48;
  --color-secondary-hover: #F48C5B;
  --color-secondary-light: rgba(224, 122, 72, 0.14);

  --color-bg: #120F0D;              /* Carbón Leña Profundo */
  --color-surface: #1A1613;         /* Superficie Cálida */
  --color-surface-hover: #26211C;
  --color-surface-alt: #161310;
  --color-surface-card: #1A1613;

  --color-text: #F7F3EE;            /* Marfil Blanco Suave */
  --color-text-secondary: #D6CEC5;  /* Texto Secundario Legible */
  --color-text-muted: #9E948A;

  --color-border: rgba(247, 243, 238, 0.1);
  --color-border-subtle: rgba(247, 243, 238, 0.05);
  --color-border-hover: rgba(217, 90, 58, 0.35);
  --color-border-gold: rgba(245, 158, 11, 0.35);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.65);
}