/* ══════════════════════════════════════════════════════
   Dunwoody Barber Shop — Design Tokens
   ══════════════════════════════════════════════════════ */

:root {
  /* ─── Color Palette ─────────────────────────── */
  --color-bg:           #1C1C1C;
  --color-bg-mid:       #161616;
  --color-bg-deep:      #111111;
  --color-bg-section:   #202020;

  --color-accent:       #C8A84B;
  --color-accent-light: #D9C070;
  --color-accent-warm:  #C87A2E;
  --color-accent-glow:  rgba(200, 168, 75, 0.35);
  --color-accent-glow-sm: rgba(200, 168, 75, 0.18);

  --color-text:         #E8E2D4;
  --color-text-muted:   #A89E8A;
  --color-text-faint:   #6B6355;
  --color-heading:      #F5F0E8;
  --color-white:        #FFFFFF;

  --color-border:       rgba(200, 168, 75, 0.15);
  --color-border-faint: rgba(255, 255, 255, 0.06);

  /* ─── Glow ───────────────────────────────────── */
  --glow-accent:    0 0 32px rgba(200, 168, 75, 0.45),
                    0 0 80px rgba(200, 168, 75, 0.15);
  --glow-accent-sm: 0 0 14px rgba(200, 168, 75, 0.40),
                    0 4px 20px rgba(200, 168, 75, 0.20);
  --glow-btn:       0 4px 24px rgba(200, 168, 75, 0.50),
                    0 2px 8px rgba(200, 168, 75, 0.30);

  /* ─── Typography ─────────────────────────────── */
  --font-heading:   'Poppins', sans-serif;
  --font-body:      'Inter', sans-serif;

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* ─── Spacing ────────────────────────────────── */
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  --section-pad: clamp(4rem, 8vw, 7rem);

  /* ─── Radius ─────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ─── Shadows ────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md:   0 4px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg:   0 8px 48px rgba(0, 0, 0, 0.60);
  --shadow-xl:   0 16px 80px rgba(0, 0, 0, 0.70);

  /* ─── Motion ─────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   180ms;
  --duration-normal: 350ms;
  --duration-slow:   600ms;

  /* ─── Layout ─────────────────────────────────── */
  --container-max:  1200px;
  --nav-height:     72px;
}