/* ============================================================
   FUTURE GUIDE — DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand — derived from the actual Future Guide / IML / RESISTA logos */
  --fg-navy-900:#0A1428;
  --fg-navy-800:#0D1A3B;
  --fg-navy-700:#16294F;
  --fg-navy-600:#22386A;

  /* Steel greys. 500 and 400-on-light were below WCAG AA for small text,
     so the text tones were darkened; the pale tones stay for rules,
     borders and large decorative numerals. */
  --fg-steel-500:#67707E;   /* 5.0:1 on white · 4.6:1 on mist */
  --fg-steel-400:#A8AEB8;   /* light text on navy only */
  --fg-steel-400-onlight:#5A6474;
  --fg-steel-200:#D8DCE3;
  --fg-numeral:#828A9B;     /* 3.2:1 on mist — 36px+ display numerals ONLY.
                               Below 18.66px AA needs 4.5:1; use steel-500. */

  --fg-mist-100:#F4F6F9;
  --fg-white:#FFFFFF;
  --fg-ink:#0B1220;
  --fg-ink-muted:#5A6474;

  --fg-swiss-red:#E1121C;
  --fg-platinum:#C9CEDA;
  --fg-success:#147350;   /* darkened to clear AA on its own tint */
  --fg-warning:#9A6210;   /* darkened to clear AA on its own tint */
  --fg-danger:#B42318;

  --fg-hairline:#E6E9EF;

  /* Type */
  --font-en:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-ar:'IBM Plex Sans Arabic','Tajawal','Noto Sans Arabic','Noto Naskh Arabic',
            'Geeza Pro','Segoe UI',Tahoma,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Shape */
  --r-sm:6px; --r-md:12px; --r-lg:20px;

  /* Depth */
  --shadow-1:0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06);
  --shadow-2:0 1px 2px rgba(11,18,32,.05), 0 18px 48px rgba(11,18,32,.10);

  /* Space */
  --section-y:128px;
  --maxw:1240px;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.3,1);
}
@media (max-width:900px){ :root{ --section-y:72px; } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-en);
  font-size:17px; line-height:1.65; color:var(--fg-ink);
  background:var(--fg-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[dir="rtl"] body{ font-family:var(--font-ar); font-size:18px; line-height:1.85; }
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}

/* Focus — visible, WCAG AA */
:focus-visible{outline:2px solid var(--fg-navy-600);outline-offset:2px;border-radius:3px}

/* Latin lock inside Arabic */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
h1.ltr,h2.ltr,h3.ltr,h4.ltr{display:block}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding-block:var(--section-y)}
.section--mist{background:var(--fg-mist-100)}
.section--navy{background:linear-gradient(168deg,var(--fg-navy-900),var(--fg-navy-700));color:#fff}
.measure{max-width:62ch}

/* ---------- Type ---------- */
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:600;line-height:1.12;color:var(--fg-ink)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h3{letter-spacing:0;line-height:1.3}
h1{font-size:clamp(38px,5.4vw,64px)}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:clamp(20px,2.2vw,24px)}
.eyebrow{
  font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-steel-500);margin-bottom:20px;display:block;
}
html[dir="rtl"] .eyebrow{letter-spacing:.02em}
.lead{font-size:19px;color:var(--fg-ink-muted);margin-top:20px}
.on-navy h2,.on-navy h1,.on-navy h3{color:#fff}
.on-navy .lead{color:var(--fg-steel-400)}
.on-navy .eyebrow{color:var(--fg-steel-400)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:var(--r-sm);border:1px solid transparent;
  font-size:15px;font-weight:500;letter-spacing:-.01em;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--fg-navy-800);color:#fff}
.btn--primary:hover{background:var(--fg-navy-700)}
.btn--onnavy{background:#fff;color:var(--fg-navy-800)}
.btn--onnavy:hover{background:var(--fg-mist-100)}
.btn--ghost{background:transparent;border-color:var(--fg-hairline);color:var(--fg-ink)}
.btn--ghost:hover{border-color:var(--fg-steel-400);background:var(--fg-mist-100)}
.btn--ghost-onnavy{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn--ghost-onnavy:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn--sm{padding:9px 18px;font-size:14px}
.arrow{transition:transform .15s var(--ease)}
html[dir="rtl"] .arrow{transform:scaleX(-1)}
.btn:hover .arrow{transform:translateX(3px)}
html[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(3px)}

.tlink{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;
  color:var(--fg-navy-800);border-bottom:1px solid var(--fg-steel-200);padding-bottom:3px;
  transition:border-color .15s var(--ease)
}
.tlink:hover{border-color:var(--fg-navy-800)}
.on-navy .tlink{color:#fff;border-color:rgba(255,255,255,.3)}
.on-navy .tlink:hover{border-color:#fff}