/**
 * FORNO & TRADIZIONE | Pizzería Napolitana Tradicional
 * Design Tokens & Semantic Variables System
 * Architecture: CSS3 Modern Native Design Tokens
 */

:root {
  /* ==========================================================================
     COLOR SYSTEM (HSL) - TEMA CLARO (Típica Pizzería Italiana Tradicional)
     ========================================================================== */
  --color-bg: hsl(40, 35%, 96%);          /* Harina rústica / masa suave */
  --color-surface: hsl(40, 25%, 91%);     /* Superficie mármol de trabajo */
  --color-surface-alt: hsl(40, 20%, 86%); /* Mármol contrastado */
  --color-surface-elevated: hsl(0, 0%, 100%);

  --color-text: hsl(210, 20%, 12%);       /* Carbón de leña de roble (Ratio > 12:1) */
  --color-text-muted: hsl(210, 12%, 40%); /* Carbón secundario legible (Ratio > 5:1) */
  --color-text-light: hsl(40, 35%, 96%);

  --color-primary: hsl(10, 80%, 48%);     /* Rojo tomate San Marzano del Vesubio */
  --color-primary-hover: hsl(10, 85%, 42%);
  --color-primary-subtle: hsl(10, 80%, 95%);

  --color-secondary: hsl(140, 50%, 30%);  /* Verde albahaca fresca & aceite EVO */
  --color-secondary-hover: hsl(140, 55%, 25%);
  --color-secondary-subtle: hsl(140, 35%, 92%);

  --color-accent: hsl(38, 90%, 52%);      /* Dorado corteza horneada a 480°C */
  --color-accent-subtle: hsl(38, 80%, 93%);

  --color-border: hsl(40, 20%, 82%);
  --color-border-hover: hsl(40, 20%, 68%);

  --color-success: hsl(145, 60%, 34%);
  --color-warning: hsl(38, 90%, 50%);
  --color-error: hsl(5, 80%, 46%);

  /* ==========================================================================
     TYPOGRAPHY SYSTEM
     ========================================================================== */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, Menlo, monospace;

  /* Escala tipográfica fluida con clamp() */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8438rem, 0.81rem + 0.18vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.2vw, 2.375rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.8vw, 3.125rem);
  --text-5xl: clamp(2.75rem, 2.25rem + 2.8vw, 4.25rem);

  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.62;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;

  /* ==========================================================================
     SPACING & LAYOUT SYSTEM
     ========================================================================== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-padding-y: clamp(3.5rem, 6vw, 7.5rem);

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-max: 1360px;
  --container-padding: clamp(1.25rem, 3.5vw, 2.5rem);

  /* ==========================================================================
     RADIUS & BORDERS
     ========================================================================== */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ==========================================================================
     SHADOWS
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(25, 20, 15, 0.05);
  --shadow-md: 0 4px 14px rgba(25, 20, 15, 0.07), 0 1px 3px rgba(25, 20, 15, 0.04);
  --shadow-lg: 0 12px 28px rgba(25, 20, 15, 0.09), 0 2px 6px rgba(25, 20, 15, 0.05);
  --shadow-xl: 0 20px 40px rgba(25, 20, 15, 0.12);

  /* ==========================================================================
     TRANSITIONS & MOTION
     ========================================================================== */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 360ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);

  --focus-ring: 0 0 0 3px hsl(10, 80%, 48%, 0.35);

  --z-negative: -1;
  --z-normal: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
}

/* ==========================================================================
   TEMA OSCURO - FORNO DI NOTTE (Piedra Volcánica & Roble Ahumado)
   ========================================================================== */
[data-theme="dark"] {
  --color-bg: hsl(210, 20%, 9%);           /* Piedra volcánica profunda */
  --color-surface: hsl(210, 16%, 13%);     /* Roble ahumado sutil */
  --color-surface-alt: hsl(210, 14%, 17%);
  --color-surface-elevated: hsl(210, 14%, 15%);

  --color-text: hsl(40, 30%, 95%);        /* Masa crema de alto contraste */
  --color-text-muted: hsl(40, 15%, 70%);  /* Crema secundario */
  --color-text-light: hsl(210, 20%, 12%);

  --color-primary: hsl(10, 85%, 55%);      /* Brasa volcánica */
  --color-primary-hover: hsl(10, 90%, 60%);
  --color-primary-subtle: hsl(10, 70%, 18%);

  --color-secondary: hsl(140, 50%, 44%);   /* Albahaca luminosa */
  --color-secondary-hover: hsl(140, 55%, 50%);
  --color-secondary-subtle: hsl(140, 60%, 16%);

  --color-accent: hsl(38, 95%, 54%);
  --color-accent-subtle: hsl(38, 70%, 18%);

  --color-border: hsl(210, 12%, 20%);
  --color-border-hover: hsl(210, 12%, 32%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.7);

  --focus-ring: 0 0 0 3px hsl(10, 85%, 55%, 0.45);
}