/* ==========================================================================
   css/tokens.css — Design Tokens: ÉCLAT Nail Atelier
   Arquétipo: Editorial Luxury & Soft Feminine Aesthetics
   ========================================================================== */

:root {
  /* DNA Cromático */
  --bg-primary: #FAF7F2;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F5EFEB;
  --bg-surface-alt: #EFE8E2;
  --bg-overlay: rgba(250, 247, 242, 0.88);
  
  --text-primary: #1E1A19;
  --text-secondary: #5E5552;
  --text-muted: #8C827E;
  --text-inverse: #FAF7F2;
  
  --accent-gold: #C99B77;
  --accent-gold-hover: #B58662;
  --accent-gold-glow: rgba(201, 155, 119, 0.16);
  --accent-blush: #EADCD3;
  --accent-blush-light: #F6EFEA;
  
  --border-subtle: rgba(30, 26, 25, 0.08);
  --border-gold: rgba(201, 155, 119, 0.38);
  --border-focus: #C99B77;
  
  --status-alive: #10B981;
  --status-alive-glow: rgba(16, 185, 129, 0.25);
  --status-closed: #9CA3AF;
  
  /* Tipografia */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', SFMono-Regular, Menlo, monospace;
  
  /* Escala de Tipografia Fluida */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.35rem, 1.2rem + 0.75vw, 1.65rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --text-display: clamp(2.75rem, 2.2rem + 3.5vw, 4.75rem);
  
  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  --section-spacing: clamp(4.5rem, 8vw, 8rem);
  --container-max: 1240px;
  
  /* Raios de Borda */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  
  /* Sombras Difusas & Elevação */
  --shadow-subtle: 0 4px 20px -2px rgba(30, 26, 25, 0.04);
  --shadow-medium: 0 12px 32px -4px rgba(30, 26, 25, 0.08);
  --shadow-elevated: 0 24px 50px -12px rgba(30, 26, 25, 0.12);
  --shadow-gold: 0 10px 28px -4px rgba(201, 155, 119, 0.28);
  
  /* Durações & Curvas (Proibido linear / ease-in-out genérico) */
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
  --dur-inercial: 1100ms;
  
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  
  /* Torchlight Coordinates */
  --torch-x: 50%;
  --torch-y: 20%;
}