/**
 * STREET DOGS | Craft Hot Dogs & Urban Diner
 * Design Tokens & Semantic Variables System
 * Architecture: CSS3 Modern Native Design Tokens
 */

:root {
  /* ==========================================================================
     COLOR SYSTEM (HSL) - TEMA CLARO (Default Diner Style)
     ========================================================================== */
  --color-bg: hsl(45, 30%, 96%);          /* Crema diner marfil cálido */
  --color-surface: hsl(45, 25%, 92%);     /* Superficie de tarjeta suave */
  --color-surface-alt: hsl(45, 30%, 88%); /* Superficie contrastada */
  --color-surface-elevated: hsl(0, 0%, 100%); /* Blanco puro para tarjetas elevadas */

  --color-text: hsl(210, 30%, 15%);       /* Asfalto carbón profundo (Ratio > 11:1) */
  --color-text-muted: hsl(210, 15%, 42%); /* Carbón secundario legible (Ratio > 4.8:1) */
  --color-text-light: hsl(45, 30%, 96%);  /* Texto sobre fondos oscuros */

  --color-primary: hsl(0, 80%, 50%);      /* Rojo salsa artesanal / fuego parrillero */
  --color-primary-hover: hsl(0, 85%, 44%);/* Rojo intenso al interactuar */
  --color-primary-subtle: hsl(0, 85%, 95%);/* Tinte rojo muy suave para badges */

  --color-secondary: hsl(45, 90%, 50%);   /* Mostaza dijon / queso cheddar fundido */
  --color-secondary-hover: hsl(45, 95%, 44%);
  --color-secondary-subtle: hsl(45, 80%, 92%);

  --color-accent: hsl(150, 60%, 35%);     /* Verde pepinillo encurtido / hierbas frescas */
  --color-accent-subtle: hsl(150, 40%, 92%);

  --color-border: hsl(45, 20%, 84%);      /* Borde sutil de líneas editoriales */
  --color-border-hover: hsl(45, 20%, 70%);

  --color-success: hsl(152, 65%, 38%);
  --color-warning: hsl(38, 92%, 50%);
  --color-error: hsl(0, 75%, 48%);

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

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

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

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

  /* ==========================================================================
     SPACING & GRID SYSTEM
     ========================================================================== */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Espaciado vertical por pantalla */
  --section-padding-y: clamp(3.5rem, 6vw, 7.5rem);

  /* ==========================================================================
     CONTAINERS & LAYOUT
     ========================================================================== */
  --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: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ==========================================================================
     SHADOWS (Delicadas y Naturales, sin sobrecargas artificiales)
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(30, 40, 50, 0.05);
  --shadow-md: 0 4px 14px rgba(30, 40, 50, 0.07), 0 1px 3px rgba(30, 40, 50, 0.04);
  --shadow-lg: 0 12px 28px rgba(30, 40, 50, 0.09), 0 2px 6px rgba(30, 40, 50, 0.05);
  --shadow-xl: 0 20px 40px rgba(30, 40, 50, 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 Accesible */
  --focus-ring: 0 0 0 3px hsl(0, 80%, 50%, 0.35);

  /* Z-INDEX HIERARCHY */
  --z-negative: -1;
  --z-normal: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
}

/* ==========================================================================
   TEMA OSCURO - DARK DINER RETRO SOFISTICADO
   ========================================================================== */
[data-theme="dark"] {
  --color-bg: hsl(210, 25%, 10%);          /* Asfalto noche urbano */
  --color-surface: hsl(210, 20%, 14%);     /* Superficie carbón sutil */
  --color-surface-alt: hsl(210, 18%, 18%); /* Superficie elevada */
  --color-surface-elevated: hsl(210, 18%, 16%);

  --color-text: hsl(45, 30%, 96%);        /* Crema legible de alto contraste */
  --color-text-muted: hsl(45, 15%, 72%);  /* Crema secundario atenuado */
  --color-text-light: hsl(210, 30%, 15%); /* Inverso para elementos sobre claros */

  --color-primary: hsl(0, 85%, 55%);      /* Rojo vibrante en oscuridad */
  --color-primary-hover: hsl(0, 90%, 60%);
  --color-primary-subtle: hsl(0, 75%, 20%);

  --color-secondary: hsl(45, 95%, 52%);   /* Mostaza luminosa */
  --color-secondary-hover: hsl(45, 95%, 58%);
  --color-secondary-subtle: hsl(45, 70%, 18%);

  --color-accent: hsl(150, 60%, 45%);
  --color-accent-subtle: hsl(150, 40%, 18%);

  --color-border: hsl(210, 15%, 22%);     /* Borde oscuro refinado */
  --color-border-hover: hsl(210, 15%, 34%);

  --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(0, 85%, 55%, 0.45);
}