/* ============================================================
   CRAFT & CO -- Design Tokens
   Preset: salon-v1
   Premium Salon / Barbershop Template
   ============================================================ */

:root {
  /* Typography */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif;

  /* Colors */
  --bg: #F5F0EB;
  --bg-dark: #1C1C1C;
  --text: #1C1C1C;
  --text-light: #F5F0EB;
  --accent: #C8A97E;
  --accent-hover: #B8955F;
  --card-bg: #FFFFFF;
  --muted: #8A8580;
  --border: rgba(28, 28, 28, 0.1);
  --border-light: rgba(245, 240, 235, 0.15);
  --overlay: rgba(28, 28, 28, 0.55);
  --overlay-light: rgba(28, 28, 28, 0.35);

  /* Layout */
  --max-w: 1400px;
  --nav-w: 80px;
  --section-pad: 100px;
  --gap: 24px;
  --radius: 0px;

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 0.35s;
  --duration-fast: 0.2s;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.18);

  /* Z-index layers */
  --z-nav: 1000;
  --z-banner: 1100;
  --z-overlay: 900;
  --z-chat: 1050;

  /* Marquee */
  --marquee-speed: 40s;
  --marquee-gap: 24px;
}

@media (max-width: 768px) {
  :root {
    --nav-w: 0px;
    --section-pad: 60px;
    --gap: 16px;
  }
}