/* =========================================================
   ENERVO — Design tokens
   Derived from the brand logo + Cahier des Charges deck:
   deep forest green, emerald, olive-leaf, gold accent.
   Theming via [data-theme]; default follows system + manual toggle.
   ========================================================= */

:root {
  /* ---- Brand core (stable across themes) ---- */
  --forest:      #163A2B;   /* deep green — hero / dark surfaces */
  --forest-700:  #1B4433;
  --forest-600:  #215140;
  --emerald:     #1B7A52;   /* primary action / icons */
  --emerald-600: #157347;
  --emerald-700: #0F5C38;
  --olive:       #4E6B23;   /* leaf accent from the logo mark */
  --gold:        #F2B90C;   /* accent — CTAs, highlights */
  --gold-600:    #D9A400;
  --gold-050:    #FBF3D9;   /* soft yellow tint (cards) */

  /* ---- Radii / spacing / motion ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --space: 1rem;
  --maxw: 1160px;
  --shadow-sm: 0 1px 2px rgba(16,40,30,.06), 0 2px 8px rgba(16,40,30,.05);
  --shadow-md: 0 8px 28px rgba(16,40,30,.10);
  --shadow-lg: 0 20px 60px rgba(16,40,30,.16);
  --ring: 0 0 0 3px rgba(27,122,82,.30);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---- Type ---- */
  --font-ar: "Cairo", "Tajawal", "Segoe UI", "Tahoma", system-ui, sans-serif;
  --font-lat: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: var(--font-ar);
  --font-display: var(--font-ar);
}

/* ---- Light theme (default) ---- */
:root,
[data-theme="light"] {
  --bg:        #FBFCFB;
  --surface:   #FFFFFF;
  --surface-2: #F1F6F3;   /* light mist green */
  --mist:      #E9F1EC;
  --sand:      var(--gold-050);
  --border:    #E1E9E4;
  --text:      #14201A;
  --text-2:    #52655B;   /* muted */
  --text-inv:  #FFFFFF;
  --hero-bg:   var(--forest);
  --hero-text: #EAF2ED;
  --primary:   var(--emerald);
  --primary-ink: #FFFFFF;
  --accent:    var(--gold);
  --accent-ink: #16342A;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg:        #0E1D16;
  --surface:   #13291F;
  --surface-2: #17362A;
  --mist:      #17362A;
  --sand:      #2A2A16;
  --border:    #21402F;
  --text:      #E7F0EA;
  --text-2:    #9DB3A6;
  --text-inv:  #0E1D16;
  --hero-bg:   #0B1711;
  --hero-text: #EAF2ED;
  --primary:   #34A374;
  --primary-ink: #06140D;
  --accent:    var(--gold);
  --accent-ink: #16342A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 10px 30px rgba(0,0,0,.40);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.50);
}

/* Follow system when the user has not chosen manually. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:#0E1D16; --surface:#13291F; --surface-2:#17362A; --mist:#17362A;
    --sand:#2A2A16; --border:#21402F; --text:#E7F0EA; --text-2:#9DB3A6;
    --text-inv:#0E1D16; --hero-bg:#0B1711; --primary:#34A374; --primary-ink:#06140D;
  }
}