/**
 * Iron & Smash Co. - Variables y Tokens de Diseño
 * Paleta Industrial-Lujo: Hierro Fundido, Dorado Brioche y Ámbar de Brasa.
 */

:root {
  /* Paleta Base HSL */
  --iron-h: 215;
  --iron-s: 20%;
  --iron-l: 12%;

  --gold-h: 38;
  --gold-s: 90%;
  --gold-l: 52%;

  --amber-h: 20;
  --amber-s: 95%;
  --amber-l: 52%;

  --kraft-h: 40;
  --kraft-s: 25%;
  --kraft-l: 96%;

  --red-h: 4;
  --red-s: 85%;
  --red-l: 52%;

  /* Semántica Modo Claro */
  --color-primary: hsl(var(--gold-h), var(--gold-s), var(--gold-l));
  --color-primary-hover: hsl(var(--gold-h), 95%, 44%);
  --color-primary-light: hsl(var(--gold-h), 80%, 92%);
  --color-primary-subtle: hsl(var(--gold-h), 70%, 96%);

  --color-secondary: hsl(var(--amber-h), var(--amber-s), var(--amber-l));
  --color-secondary-hover: hsl(var(--amber-h), 95%, 42%);
  --color-secondary-light: hsl(var(--amber-h), 75%, 92%);

  --color-accent: hsl(var(--red-h), var(--red-s), var(--red-l));
  --color-accent-hover: hsl(var(--red-h), 85%, 44%);

  --color-bg: hsl(var(--kraft-h), var(--kraft-s), var(--kraft-l));
  --color-bg-secondary: hsl(40, 20%, 91%);
  --color-surface: #ffffff;
  --color-surface-hover: hsl(40, 25%, 98%);

  --color-text: hsl(var(--iron-h), var(--iron-s), var(--iron-l));
  --color-text-muted: hsl(215, 14%, 38%);
  --color-text-light: hsl(215, 10%, 55%);

  --color-border: hsl(215, 12%, 84%);
  --color-border-subtle: hsl(215, 12%, 90%);

  /* Sombras y Luces */
  --shadow-sm: 0 2px 5px rgba(18, 24, 33, 0.05);
  --shadow-md: 0 4px 16px rgba(18, 24, 33, 0.08);
  --shadow-lg: 0 12px 32px rgba(18, 24, 33, 0.12);
  --shadow-xl: 0 20px 48px rgba(18, 24, 33, 0.16);

  /* Tipografía */
  --font-display: 'Syne', 'Oswald', -apple-system, sans-serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Escala Modular Clamp */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.82rem + 0.3vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --font-size-xl: clamp(1.35rem, 1.2rem + 0.75vw, 1.65rem);
  --font-size-2xl: clamp(1.65rem, 1.45rem + 1vw, 2.15rem);
  --font-size-3xl: clamp(2.1rem, 1.8rem + 1.5vw, 2.9rem);
  --font-size-4xl: clamp(2.6rem, 2.2rem + 2vw, 3.95rem);

  /* Espaciado */
  --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;

  /* Radios y Transiciones */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  --container-max: 1200px;
  --container-narrow: 840px;
}

/* Modo Hierro Fundido Oscuro (Meatpacking District at Night) */
[data-theme="dark"] {
  --color-primary: hsl(var(--gold-h), 92%, 56%);
  --color-primary-hover: hsl(var(--gold-h), 95%, 64%);
  --color-primary-light: hsl(var(--gold-h), 40%, 18%);
  --color-primary-subtle: hsl(var(--gold-h), 25%, 14%);

  --color-secondary: hsl(var(--amber-h), 95%, 56%);
  --color-secondary-hover: hsl(var(--amber-h), 95%, 64%);

  --color-accent: hsl(var(--red-h), 85%, 60%);
  --color-accent-hover: hsl(var(--red-h), 85%, 68%);

  --color-bg: hsl(215, 25%, 8%);
  --color-bg-secondary: hsl(215, 22%, 12%);
  --color-surface: hsl(215, 20%, 14%);
  --color-surface-hover: hsl(215, 20%, 18%);

  --color-text: hsl(40, 25%, 94%);
  --color-text-muted: hsl(215, 15%, 72%);
  --color-text-light: hsl(215, 10%, 54%);

  --color-border: hsl(215, 16%, 24%);
  --color-border-subtle: hsl(215, 16%, 18%);

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.65);
  --shadow-xl: 0 20px 52px rgba(0, 0, 0, 0.75);
}