/* ================================
   ⚠️  PROTECTED FILE — tokens.css
   ================================

   This is the single source of truth
   for the Ideal Barbers V2 design system.

   DO NOT:
   - Redefine any :root variables
     in any other CSS file
   - Replace CSS variables with
     hardcoded color values
   - Add new color variables outside
     this file
   - Remove or rename existing variables

   Color system:
   --gold    = reward moments (CTAs,
               selections, confirmations)
   --teal    = navigation and wayfinding
               (borders, glows, indicators)
   --dark    = canvas (backgrounds)
   --white   = content (text)

   If you need a new color, add it
   to this file first, then use
   the variable everywhere else.

   Last verified: March 2026
================================ */

:root {

  /* ── COLORS ─────────────────── */

  /* Primary — Gold (reward moments) */
  --gold:          #C9A84C;
  --gold-dark:     #A8872E;
  --gold-light:    #E8D090;
  --gold-glow:     rgba(201, 168, 76, 0.3);
  --gold-subtle:   rgba(201, 168, 76, 0.08);

  /* Secondary — Teal (navigation,
     wayfinding, system elements) */
  --teal:          #0D9488;
  --teal-bright:   #14B8A6;
  --teal-muted:    #0F766E;
  --teal-glow:     rgba(13, 148, 136, 0.25);
  --teal-subtle:   rgba(13, 148, 136, 0.08);

  /* Neutrals */
  --black:         #0D0D0D;
  --dark:          #1A1A1A;
  --dark-2:        #222222;
  --mid:           #3A3A3A;
  --dim:           #666666;
  --gray:          #F5F5F5;
  --white:         #FFFFFF;

  /* Semantic */
  --success:       #1C5438;
  --success-light: #EBF5EE;
  --warning:       #7A4D08;
  --warning-light: #FDF6E0;
  --error:         #7A1A1A;
  --error-light:   #FDF0F0;

  /* ── TYPOGRAPHY ─────────────── */
  --font-display:  'Playfair Display', serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono:     'DM Mono', monospace;

  /* ── SPACING ────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;
  --space-2xl:  96px;

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

  /* ── SHADOWS ────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.18);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.24);
  --shadow-gold: 0 0 20px var(--gold-glow);
  --shadow-teal: 0 0 16px var(--teal-glow);

  /* ── TRANSITIONS ────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── LAYOUT ─────────────────── */
  --nav-height:        64px;
  --bottom-nav-height: 72px;
  --max-width:         1200px;
  --content-padding:   24px;

  /* ── LEGACY ALIASES (keep existing code working) ─── */
  /* Do not use these names in new code. Use the canonical names above. */
  --tab-bar-height: var(--bottom-nav-height);
  --max-content:    var(--max-width);
  --page-pad:       var(--content-padding);

}