/* ==========================================================================
   Design Tokens — CSS Custom Properties
   Single source of truth for all visual constants.
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-bg-white:       #FFFFFF;
  --color-bg-cream:       #FFF8F2;
  --color-bg-cream-deep:  #FAF3EC;
  --color-bg-peach-light: #FDE8D7;
  --color-bg-peach-wash:  #FFF0E4;

  --color-accent:         #F79F65;
  --color-accent-light:   #FBAF74;
  --color-accent-hover:   #E88D53;
  --color-accent-bg:      rgba(247, 159, 101, 0.08);
  --color-accent-border:  rgba(247, 159, 101, 0.25);

  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #1EBE5A;

  --color-text-primary:   #2D2D2D;
  --color-text-secondary: #3A3A3A;
  --color-text-muted:     #666666;
  --color-text-light:     #999999;
  --color-text-inverse:   #FFFFFF;

  --color-border:         #F0E0D0;
  --color-border-light:   #F5EDE5;
  --color-shadow:         rgba(45, 45, 45, 0.06);
  --color-shadow-strong:  rgba(45, 45, 45, 0.12);
  --color-overlay:        rgba(45, 45, 45, 0.5);

  --color-success:        #22C55E;
  --color-error:          #EF4444;

  /* ---- Typography ---- */
  --font-script:    'Dancing Script', cursive;
  --font-display:   'Outfit', sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   2rem;       /* 32px */
  --fs-3xl:   2.5rem;     /* 40px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-5xl:   3.5rem;     /* 56px */
  --fs-hero:  clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2:    clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3:    clamp(1.25rem, 2.5vw, 1.5rem);

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-wider:   0.05em;

  /* ---- Spacing ---- */
  --space-2xs:  0.25rem;  /* 4px */
  --space-xs:   0.5rem;   /* 8px */
  --space-sm:   0.75rem;  /* 12px */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-2xl:  3rem;     /* 48px */
  --space-3xl:  4rem;     /* 64px */
  --space-4xl:  6rem;     /* 96px */
  --space-5xl:  8rem;     /* 128px */

  --section-pad-y: clamp(3rem, 8vw, 6rem);

  /* ---- Layout ---- */
  --container-max:    1200px;
  --container-narrow: 800px;
  --container-pad:    1.5rem;

  /* ---- Borders & Radii ---- */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  --border-thin:  1px solid var(--color-border);
  --border-light: 1px solid var(--color-border-light);

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 3px var(--color-shadow);
  --shadow-md:   0 4px 12px var(--color-shadow);
  --shadow-lg:   0 8px 24px var(--color-shadow);
  --shadow-xl:   0 12px 40px var(--color-shadow-strong);

  /* ---- Transitions ---- */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  --transition-base:  all var(--duration-normal) var(--ease-out);
  --transition-fast:  all var(--duration-fast) var(--ease-out);
  --transition-slow:  all var(--duration-slow) var(--ease-out);

  /* ---- Z-Index Scale ---- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}