/* ==========================================================================
   Barbería de San Pedro — Design Tokens
   ========================================================================== */

:root {
  /* ── Colors ── */
  --color-black: #0B0B0B;
  --color-carbon: #1A1A1A;
  --color-carbon-light: #222222;
  --color-gold: #C8A45D;
  --color-gold-light: #D4B76A;
  --color-gold-dark: #A8883D;
  --color-steel: #5C5C5C;
  --color-steel-light: #8A8A8A;
  --color-warm-white: #F5F3EE;
  --color-warm-white-dim: rgba(245, 243, 238, 0.7);
  --color-overlay: rgba(11, 11, 11, 0.75);
  --color-overlay-heavy: rgba(11, 11, 11, 0.88);
  --color-glass: rgba(26, 26, 26, 0.6);
  --color-glass-border: rgba(200, 164, 93, 0.15);
  --color-card: rgba(26, 26, 26, 0.8);
  --color-card-hover: rgba(34, 34, 34, 0.9);

  /* ── Typography ── */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-cursive: 'Great Vibes', cursive;

  --fs-hero: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1: clamp(2rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body: clamp(1.45rem, 1.1vw, 1.1rem);
  --fs-small: clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-badge: 0.75rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --ls-wide: 0.15em;
  --ls-wider: 0.25em;
  --ls-widest: 0.35em;

  /* ── Spacing ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --space-section: clamp(5rem, 10vw, 8rem);

  /* ── Layout ── */
  --max-width: 1280px;
  --max-width-narrow: 900px;
  --border-radius: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 4px 20px rgba(200, 164, 93, 0.15);
  --shadow-glow: 0 0 30px rgba(200, 164, 93, 0.1);

  /* ── Transitions ── */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 0.7s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --z-base: 1;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-whatsapp: 400;
}