/* assets/css/theme.css */
/* ═══════════════════════════════════════
   Momenta Box — Design Tokens & Theme
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* ── CSS Custom Properties ────────────── */
:root {
  /* Brand Colors */
  --color-gold:          #C9A84C;
  --color-gold-light:    #E2C97E;
  --color-gold-dark:     #A8882C;
  --color-gold-pale:     #2A2318;
  --color-black:         #0D0D0D;
  --color-dark:          #141414;
  --color-dark-2:        #1E1E1E;
  --color-dark-3:        #2A2A2A;
  --color-cream:         #1A1A1A;
  --color-cream-dark:    #111111;
  --color-white:         #FFFFFF;

  /* Text Colors */
  --color-text-primary:   #F0EBE0;
  --color-text-secondary: #BBBBBB;
  --color-text-muted:     #888888;
  --color-text-light:     #666666;

  /* UI Colors */
  --color-border:         #2E2E2E;
  --color-border-dark:    #3A3A3A;
  --color-success:        #2D7A4F;
  --color-success-light:  #0D2B1A;
  --color-error:          #C0392B;
  --color-error-light:    #2B0D0D;
  --color-warning:        #D4820A;
  --color-warning-light:  #2B1E05;
  --color-info:           #1A5276;
  --color-info-light:     #0D1E2B;

  /* Typography */
  --font-primary:   'Tajawal', sans-serif;
  --font-display:   'Playfair Display', serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  1.875rem;
  --font-size-3xl:  2.25rem;
  --font-size-4xl:  3rem;
  --font-size-5xl:  3.75rem;
  --font-size-6xl:  4.5rem;

  /* Spacing */
  --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;

  /* Borders */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-lg:      0 10px 40px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.40);
  --shadow-xl:      0 20px 60px rgba(0,0,0,0.70), 0 8px 24px rgba(0,0,0,0.50);
  --shadow-gold:    0 4px 20px rgba(201,168,76,0.35);
  --shadow-gold-lg: 0 8px 40px rgba(201,168,76,0.50);

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:   300ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   500ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 400ms cubic-bezier(0.34,1.56,0.64,1);

  /* Layout */
  --container-max:    1320px;
  --container-pad:    clamp(1rem, 5vw, 2rem);
  --header-height:    80px;
  --header-height-sm: 64px;

  /* Z-index */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
}

/* ── Dark Mode Variables ─────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-cream:      #141414;
    --color-cream-dark: #111111;
    --color-white:      #FFFFFF;
    --color-border:     #2E2E2E;
    --color-text-primary:   #F0EBE0;
    --color-text-secondary: #BBBBBB;
    --color-text-muted:     #888888;
  }
}

/* ── Utility Classes ─────────────────── */
.text-gold    { color: var(--color-gold); }
.text-dark    { color: var(--color-dark); }
.text-muted   { color: var(--color-text-muted); }
.bg-dark      { background-color: var(--color-dark); }
.bg-cream     { background-color: var(--color-cream); }
.bg-gold      { background-color: var(--color-gold); }
.font-display { font-family: var(--font-display); }
.font-primary { font-family: var(--font-primary); }

/* ── Gold Gradient ───────────────────── */
.gradient-gold {
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%);
}

.gradient-gold-text {
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Section Divider ─────────────────── */
.section-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold), var(--color-gold-light));
  margin: var(--space-4) auto;
}

.section-divider--right {
  margin-right: 0;
  margin-left: auto;
}

/* ── Badge ───────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.75em;
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge--gold    { background: var(--color-gold-pale); color: var(--color-gold-light); }
.badge--dark    { background: var(--color-dark-3); color: var(--color-white); }
.badge--success { background: var(--color-success-light); color: var(--color-success); }
.badge--error   { background: var(--color-error-light); color: var(--color-error); }
.badge--warning { background: var(--color-warning-light); color: var(--color-warning); }
.badge--new     { background: var(--color-gold); color: var(--color-black); }
.badge--sale    { background: var(--color-error); color: var(--color-white); }