/* ==========================================================================
   AD PHASE — Design Tokens
   Dark emerald is the brand default. Light is warm ivory. Never pure black.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* ---- surfaces (dark / default) ---- */
  --bg:            #0D1712;
  --bg-elevated:   #122019;
  --bg-soft:       #16241C;
  --bg-soft-2:     #1B2C22;
  --line:          rgba(238,241,234,0.09);
  --line-strong:   rgba(238,241,234,0.16);

  --glass-bg:      rgba(238,241,234,0.045);
  --glass-bg-2:    rgba(238,241,234,0.075);
  --glass-border:  rgba(238,241,234,0.11);
  --glass-blur:    18px;

  /* ---- ink ---- */
  --ink:           #EEF1EA;
  --ink-soft:      #B9C4BB;
  --ink-faint:     #7E8C82;
  --ink-invert:    #0D1712;

  /* ---- brand: dark green base + phosphorescent lime accent ---- */
  --brand:         #B7E817;
  --brand-strong:  var(--brand);
  --brand-deep:    #1B4A41;
  --brand-deeper:  #123128;
  --brand-line:    color-mix(in srgb, var(--brand) 40%, transparent);
  --brand-wash:    color-mix(in srgb, var(--brand) 13%, transparent);
  --brand-glow:    0 0 90px color-mix(in srgb, var(--brand) 35%, transparent);
  --brand-glow-sm: 0 0 32px color-mix(in srgb, var(--brand) 45%, transparent);

  --on-brand:      #0E1A10;

  /* ---- feedback ---- */
  --danger:        #E2685A;

  /* ---- shadow ---- */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.35);
  --shadow-2: 0 18px 50px -22px rgba(0,0,0,0.65);
  --shadow-3: 0 30px 90px -30px rgba(0,0,0,0.7);

  /* ---- type families ---- */
  --font-display: 'Montserrat', 'Almarai', 'Segoe UI', sans-serif;
  --font-body:    'Montserrat', 'Almarai', 'Segoe UI', sans-serif;
  --font-latin:   'Montserrat', 'Segoe UI', sans-serif;      /* numbers & English labels */

  /* ---- fluid type scale (one scale for the whole site) ----
     Big sizes are capped so headlines never shout; small sizes have a readable floor. */
  --fs-display: calc(clamp(2.3rem, 1.55rem + 3.2vw, 3.75rem) * var(--fs-head-scale, 1));   /* page-hero H1, closing CTA */
  --fs-hero:  var(--fs-display);
  --fs-h1:    calc(clamp(2.05rem, 1.55rem + 2vw, 3rem) * var(--fs-head-scale, 1));
  --fs-h2:    calc(clamp(1.7rem, 1.35rem + 1.4vw, 2.4rem) * var(--fs-head-scale, 1));         /* every section title */
  --fs-card:  calc(clamp(1.45rem, 1.2rem + .95vw, 2rem) * var(--fs-head-scale, 1));           /* large card / feature titles */
  --fs-h3:    calc(clamp(1.25rem, 1.1rem + .65vw, 1.55rem) * var(--fs-head-scale, 1));
  --fs-lead:  calc(clamp(1.06rem, 1rem + .35vw, 1.22rem) * var(--fs-text-scale, 1));
  --fs-body:  calc(1.0625rem * var(--fs-text-scale, 1));
  --fs-small: calc(.95rem * var(--fs-text-scale, 1));
  --fs-micro: calc(.85rem * var(--fs-text-scale, 1));                                         /* the floor for real text */
  --fs-stat:  calc(clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem) * var(--fs-head-scale, 1));
  --fs-num-xl: calc(clamp(3.5rem, 2rem + 6vw, 7rem) * var(--fs-head-scale, 1));               /* giant outline numerals */

  /* ---- spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.25rem;
  --sp-7: 3.25rem;
  --sp-8: 4.75rem;
  --sp-9: 7rem;
  --sp-10: 10rem;

  /* ---- radius (restrained; editorial, not bubble-card) ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---- layout ---- */
  --container: 1340px;
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 96px;
  --header-h-shrunk: 68px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.16,.8,.28,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .22s;
  --dur-med: .5s;
  --dur-slow: .9s;
}

/* ==========================================================================
   LIGHT THEME
   ========================================================================== */
:root[data-theme="light"]{
  color-scheme: light;

  --bg:            #F8F5EC;
  --bg-elevated:   #FFFFFF;
  --bg-soft:       #F1EEE2;
  --bg-soft-2:     #EAE6D6;
  --line:          rgba(19,30,23,0.10);
  --line-strong:   rgba(19,30,23,0.18);

  --glass-bg:      rgba(19,30,23,0.035);
  --glass-bg-2:    rgba(19,30,23,0.06);
  --glass-border:  rgba(19,30,23,0.09);

  --ink:           #12201A;
  --ink-soft:      #44554B;
  --ink-faint:     #7A8A7F;
  --ink-invert:    #F8F5EC;


  --brand-strong:  #6B8A0A;
  --brand-deep:    #EEF3D2;
  --brand-deeper:  #E4EDBE;
  --brand-line:    color-mix(in srgb, var(--brand-strong) 38%, transparent);
  --brand-wash:    color-mix(in srgb, var(--brand) 16%, transparent);
  --brand-glow:    0 0 70px color-mix(in srgb, var(--brand-strong) 18%, transparent);
  --brand-glow-sm: 0 0 24px color-mix(in srgb, var(--brand-strong) 22%, transparent);

  --on-brand:      #16220C;

  --shadow-1: 0 1px 0 rgba(19,30,23,0.06);
  --shadow-2: 0 18px 50px -26px rgba(19,30,23,0.28);
  --shadow-3: 0 30px 80px -32px rgba(19,30,23,0.30);
}

/* ==========================================================================
   HEADER stays dark in the light theme (the footer is always dark too — see footer.css):
   the dark tokens are restored inside the header and the mobile menu.
   ========================================================================== */
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .mobile-nav{
  color-scheme: dark;
  --bg:            #0D1712;
  --bg-elevated:   #122019;
  --bg-soft:       #16241C;
  --bg-soft-2:     #1B2C22;
  --line:          rgba(238,241,234,0.09);
  --line-strong:   rgba(238,241,234,0.16);
  --glass-bg:      rgba(238,241,234,0.045);
  --glass-bg-2:    rgba(238,241,234,0.075);
  --glass-border:  rgba(238,241,234,0.11);
  --ink:           #EEF1EA;
  --ink-soft:      #B9C4BB;
  --ink-faint:     #7E8C82;
  --ink-invert:    #0D1712;
  --brand-strong:  var(--brand);
  --brand-deep:    #1B4A41;
  --brand-deeper:  #123128;
  --brand-line:    color-mix(in srgb, var(--brand) 40%, transparent);
  --brand-wash:    color-mix(in srgb, var(--brand) 13%, transparent);
  --on-brand:      #0E1A10;
  --shadow-3: 0 30px 90px -30px rgba(0,0,0,0.7);
  color: var(--ink);
}
/* over a light page the header can't be see-through: give it a solid dark bar from the start */
/* over a light page the header becomes dark glass (same look as the footer's glass panel) */
html:root[data-theme="light"] .site-header::before,
html:root[data-theme="light"] .site-header.is-scrolled::before{
  background:
    linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 45%, rgba(255,255,255,.045) 100%),
    radial-gradient(30% 140% at 85% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(28% 140% at 15% 100%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
    rgba(9,19,13,0.86);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 40px color-mix(in srgb, var(--brand) 4%, transparent),
    0 18px 50px -24px rgba(13,23,18,.55);
}
html:root[data-theme="light"] .site-header{ border-bottom-color: color-mix(in srgb, var(--brand) 22%, transparent); }
html:root[data-theme="light"] .site-header::after{          /* thin light reflection, like the footer panel */
  content:"";
  position:absolute; inset:auto 12% -1px; height:1px;
  background: linear-gradient(90deg, transparent, #d9f37a, transparent);
  opacity:.45;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0s; --dur-med:0s; --dur-slow:0s; }
}