/* ============================================================
   TOKENS.CSS — Design Tokens for Ale Flores y Detalles
   All custom properties. No hardcoded values elsewhere
   (exception: WhatsApp brand green in global.css).
   ============================================================ */

:root {
  /* --- Color Palette --- */
  --color-bg:           #FAFBF6;
  --color-surface:      #F5F0E8;
  --color-surface-alt:  #EEF5E6;
  --color-text:         #2C3E2D;
  --color-muted:        #7A8C7B;
  --color-text-light:   #FAFBF6;
  --color-primary:      #4A6741;
  --color-primary-light:#6B8F5E;
  --color-primary-hover:#3A5232;
  --color-accent:       #F5C429;
  --color-accent-hover: #E0B020;
  --color-accent-soft:  #FEF3C7;
  --color-border:       #D4DDD0;
  --color-border-dark:  #A8BCAB;
  --color-error:        #C0392B;

  /* --- Shadows (tinted with primary color) --- */
  --shadow-sm:     0 2px 8px rgba(74, 103, 65, 0.10);
  --shadow-md:     0 4px 20px rgba(74, 103, 65, 0.15);
  --shadow-lg:     0 8px 40px rgba(74, 103, 65, 0.20);
  --shadow-accent: 0 4px 20px rgba(245, 196, 41, 0.25);

  /* --- Z-index Scale --- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   150;
  --z-modal:    200;
  --z-toast:    300;
  --z-overlay:  400;

  /* --- Typography --- */
  --font-script:  'Great Vibes', cursive;
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Nunito', sans-serif;

  --text-xs:   clamp(0.75rem,  1.5vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 2vw,   1rem);
  --text-base: clamp(1rem,     2vw,   1.125rem);
  --text-lg:   clamp(1.125rem, 2.5vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 3vw,   1.75rem);
  --text-2xl:  clamp(1.75rem,  4vw,   2.25rem);
  --text-3xl:  clamp(2.25rem,  5vw,   3rem);
  --text-4xl:  clamp(3rem,     6vw,   4.5rem);
  --text-script: clamp(2.5rem, 7vw,   5rem);

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.03em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;

  /* --- Spacing Scale --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Border Radius --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* --- Animation Tokens --- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-gentle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sharp:  cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;
}