/**
 * Marame Beauty — Design Tokens
 * Source of truth: frontend/tailwind.config.js + globals.css
 * Loaded before main.css via inc/enqueue.php
 */

:root {
  /* Colors */
  --gold:        #C8A96E;
  --gold-light:  #E8D5A3;
  --gold-dark:   #A07840;
  --gold-50:     #FAF5EA;
  --cream:       #FBF8F2;
  --cream-dark:  #F2EBE0;
  --charcoal:    #1C1410;
  --mbrown:      #3D2B1F;
  --star:        #F4C430;
  --white:       #FFFFFF;
  --green-600:   #16a34a;
  --orange-600:  #ea580c;
  --red-600:     #dc2626;

  /* Typography */
  --font-cairo:   'Cairo', sans-serif;
  --font-tajawal: 'Tajawal', sans-serif;

  /* Layout */
  --max-w:         80rem;
  --section-py:    3rem;
  --section-py-lg: 5rem;
  --section-px:    1rem;
  --section-px-sm: 1.5rem;
  --section-px-lg: 2rem;

  /* Radii */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.25rem;
  --radius-full: 9999px;

  /* Shadows — tailwind boxShadow */
  --shadow-card:    0 2px 16px rgba(28, 20, 16, 0.08);
  --shadow-gold:    0 4px 20px rgba(200, 169, 110, 0.3);
  --shadow-gold-lg: 0 8px 40px rgba(200, 169, 110, 0.4);

  /* Gradients — backgroundImage */
  --gradient-gold:  linear-gradient(135deg, #C8A96E 0%, #E8D5A3 50%, #A07840 100%);
  --gradient-cream: linear-gradient(180deg, #FBF8F2 0%, #F2EBE0 100%);

  /* Motion */
  --trans:      200ms ease;
  --trans-slow: 300ms ease;
}

/* Base — mirrors globals.css @layer base */
html {
  scroll-behavior: smooth;
}

body {
  text-align: right;
  direction: rtl;
  background-color: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-cairo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Keyframes — tailwind animation */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 110, 0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(200, 169, 110, 0); }
}

@keyframes scrollX {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes scrollXThird {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-33.333333%, 0, 0); }
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}