/*
Theme Name: GoldEdx Academy
Description: A fully featured, modern, premium light-themed WordPress template for GoldEdx Academy.
Author: Antigravity
Version: 2.0.0
Text Domain: goldedx-academy
*/

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

/* ─── BRAND DESIGN TOKENS ─── */
:root {
  /* Gold palette — exact brand values */
  --gold:        #B8892A;
  --gold-light:  #C9A14A;
  --gold-muted:  #D4A853;
  --gold-pale:   #F5EDD8;
  --gold-faint:  #FAF4E8;
  --gold-dark:   #8C6820;

  /* Navy / Dark palette */
  --navy:        #1B2340;
  --navy-mid:    #2C3654;
  --ink:         #2B2B2B;
  --stone:       #5A6070;
  --pebble:      #8A919E;

  /* Surface / Background */
  --cream:       #F0EDE8;
  --cream-warm:  #F7F3EE;
  --surface:     #FAFAF9;
  --white:       #FFFFFF;

  /* Borders */
  --border:      rgba(180, 160, 120, 0.20);
  --border-soft: rgba(180, 160, 120, 0.12);

  /* ── Legacy aliases (keep backward compat with main.css) ── */
  --background:           var(--white);
  --background-secondary: var(--cream-warm);
  --foreground:           var(--ink);
  --foreground-light:     var(--stone);
  --accent-gold:          var(--gold);
  --accent-gold-dark:     var(--gold-dark);
  --border-color:         var(--border);

  /* Typography */
  --font-body:    'Inter', 'Tajawal', sans-serif;
  --font-display: 'Cormorant Garamond', 'Tajawal', serif;

  /* Layout */
  --page-max:   1120px;
  --container:  1200px;

  /* Spacing scale */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   6rem;
  --space-2xl:  8rem;

  /* Radius */
  --radius:     20px;
  --radius-md:  12px;
  --radius-sm:  8px;
  --radius-xs:  6px;
  --radius-pill: 50px;

  /* Transitions */
  --transition: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── DARK MODE ─── */
:root.dark-mode {
  --background:           #111318;
  --background-secondary: #1B2340;
  --foreground:           #F0EDE8;
  --foreground-light:     #8A919E;
  --border-color:         rgba(180, 160, 120, 0.15);

  --cream-warm:  #1B2340;
  --surface:     #111318;
  --white:       #111318;
  --ink:         #F0EDE8;
  --stone:       #8A919E;
  --navy:        #F0EDE8;
  --border:      rgba(180, 160, 120, 0.15);
}

/* ─── BASE RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.65;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.1;
  color: var(--navy);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ─── BRAND SECTION LABEL PATTERN ─── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--gold);
  display: inline-block;
  flex-shrink: 0;
}

/* ─── ENTRANCE ANIMATIONS ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-in {
  animation: fadeInUp 0.7s var(--transition) both;
}
.animate-in-delay-1 { animation-delay: 0.1s; }
.animate-in-delay-2 { animation-delay: 0.2s; }
.animate-in-delay-3 { animation-delay: 0.3s; }
.animate-in-delay-4 { animation-delay: 0.4s; }