/* Strategic Labs — V002-M2 design tokens.
   Brand-led, light-dominant system. Dark surfaces are DEEP BRAND GREEN,
   never generic black. Replaces the M1 near-black/hairline language entirely. */
:root {
  /* ---- Owner-approved brand family ---- */
  --brand:        #44BCA7;  /* primary brand */
  --brand-2:      #2FA792;  /* derived, interactive */
  --brand-deep:   #1A4B44;  /* deep brand */
  --brand-mid:    #15705E;  /* derived mid-deep */
  --mint:         #AEE2D1;  /* light brand */
  --mint-wash:    #E4F4EE;  /* lightest brand wash */
  --ink-900:      #071614;  /* deepest surface (footer) */
  --ink-800:      #0C2320;  /* dark section surface */

  /* ---- neutrals (warm, brand-tinted — never pure grey/black) ---- */
  --paper:        #FBFBF8;  /* warm white page ground */
  --paper-2:      #F3F6F3;  /* soft ivory / light gray-green */
  --paper-3:      #EBF0EC;  /* deeper neutral wash */
  --white:        #FFFFFF;
  --ink:          #12201D;  /* body text — deep green-black */
  --ink-soft:     #3D4F4A;  /* secondary text */
  --muted:        #6A7A74;  /* tertiary text */
  --line:         rgba(26,75,68,.14);
  --line-strong:  rgba(26,75,68,.26);

  /* on dark surfaces */
  --on-dark:       #F2F8F5;
  --on-dark-soft:  #C2D6CF;
  --on-dark-muted: #90A9A2;
  --line-dark:     rgba(174,226,209,.16);
  --line-dark-str: rgba(174,226,209,.30);

  /* semantic */
  --danger:      #A8412F;
  --danger-wash: #FBEEEB;

  /* ---- elevation (replaces M1 hairline grids) ---- */
  --e1: 0 1px 3px rgba(12,35,32,.06);
  --e2: 0 4px 12px rgba(12,35,32,.07);
  --e3: 0 14px 32px rgba(12,35,32,.09);
  --e4: 0 28px 64px rgba(12,35,32,.13);

  /* ---- radii — soft, designed objects ---- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-card: 16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-arch: 160px;  /* brand arc / dome motif */
  --r-pill: 999px;

  /* ---- spacing rhythm: desktop 88–120 / tablet 64–88 / mobile 48–68 ---- */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --sec:       clamp(3rem, 2rem + 4vw, 6.75rem);   /* 48 → 108 */
  --sec-tight: clamp(2.25rem, 1.6rem + 2.6vw, 4.5rem);

  /* ---- executive grid: 12 desktop / 8 tablet / 4 mobile ---- */
  --cols: 12;
  --gutter: 24px;
  --content: min(1220px, calc(100vw - 80px));
  --gutter-side: 40px;  /* half of --content's side inset — used for edge-bleed rails */
  --reading: min(68ch, calc(100vw - 48px));
  --header-h: 80px;

  /* ---- type scale — controlled, per Owner ranges ---- */
  --fs-h1:      clamp(2.125rem, 1.35rem + 2.4vw, 3.625rem);  /* 34 → 58 */
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.35vw, 2.625rem);  /* 28 → 42 */
  --fs-h3:      clamp(1.2rem, 1.1rem + .38vw, 1.45rem);      /* 19 → 23 */
  --fs-h4:      1.0625rem;
  --fs-lead:    clamp(1.09rem, 1.02rem + .28vw, 1.28rem);    /* 17.5 → 20.5 */
  --fs-body:    clamp(1.03rem, .99rem + .16vw, 1.125rem);    /* 16.5 → 18 */
  --fs-sm:      .9375rem;
  --fs-eyebrow: .8125rem;
  --fs-stat:    clamp(2.5rem, 1.9rem + 2.1vw, 3.85rem);
  --lh-body: 1.85;   /* Arabic reading comfort */
  --lh-tight: 1.22;

  /* ---- motion ---- */
  --ease:     cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,.84,.30,1);
  --t-fast: 160ms;
  --t:      280ms;
  --t-slow: 460ms;
  --t-drift: 32s;   /* background surface drift */

  /* ---- z-index scale ---- */
  --z-bg: 0; --z-body: 1; --z-local: 80; --z-header: 100; --z-mega: 110; --z-mnav: 500; --z-skip: 1000;
}

@media (max-width: 1023px) {
  :root { --cols: 8; --gutter: 20px; --content: min(100% - 56px, 940px); --header-h: 72px; --gutter-side: 28px; }
}
@media (max-width: 833px) {
  :root { --cols: 8; --content: min(100% - 44px, 760px); --gutter-side: 22px; }
}
@media (max-width: 599px) {
  :root { --cols: 4; --gutter: 16px; --content: calc(100% - 36px); --header-h: 64px; --gutter-side: 18px; }
}
@media (max-width: 359px) {
  :root { --content: calc(100% - 28px); --gutter-side: 14px; }
}