/* ONS3 — tokens.css
 * Owns the design tokens, the reset, the body/type foundation and every @keyframes.
 * Every other stylesheet in this theme CONSUMES the custom properties declared here
 * and must never hard-code a value that already has a token.
 * Source of truth: spec-design.md §2.5 (tokens), §8 + §14 (keyframes), §11 (RTL), §12 + G18 (reduced motion).
 */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* brand */
  --ons-gold:#d49149;
  --ons-wine:#a5304c;
  --ons-blue:#1b3a4e;
  --ons-cream:#f4ece2;
  --ons-deep:#0c1c26;
  --ons-ink:#14232c;
  --ons-teal-deep:#2f4448;
  --ons-gold-on-cream:#854914;
  --ons-card-base:#102a38;

  /* accent (swapped by the gold/wine mode) */
  --accent:var(--ons-gold);
  --accent2:var(--ons-wine);
  /* accent when it lands on a cream section — the bright gold fails contrast there */
  --ons-accent-on-cream:var(--ons-gold-on-cream);

  /* cream alpha scale on dark */
  --cream-035:rgba(244,236,226,.035); --cream-04:rgba(244,236,226,.04);
  --cream-08:rgba(244,236,226,.08);   --cream-09:rgba(244,236,226,.09);
  --cream-14:rgba(244,236,226,.14);   --cream-16:rgba(244,236,226,.16);
  --cream-20:rgba(244,236,226,.2);    --cream-24:rgba(244,236,226,.24);
  --cream-25:rgba(244,236,226,.25);   --cream-40:rgba(244,236,226,.4);
  --cream-45:rgba(244,236,226,.45);   --cream-48:rgba(244,236,226,.48);
  --cream-55:rgba(244,236,226,.55);   --cream-60:rgba(244,236,226,.6);
  --cream-62:rgba(244,236,226,.62);   --cream-66:rgba(244,236,226,.66);
  --cream-70:rgba(244,236,226,.7);    --cream-72:rgba(244,236,226,.72);
  --cream-74:rgba(244,236,226,.74);   --cream-76:rgba(244,236,226,.76);
  --cream-78:rgba(244,236,226,.78);   --cream-80:rgba(244,236,226,.8);
  --cream-85:rgba(244,236,226,.85);   --cream-90:rgba(244,236,226,.9);
  --cream-94:rgba(244,236,226,.94);

  /* gold alpha */
  --gold-00:rgba(212,145,73,0);   --gold-10:rgba(212,145,73,.1);
  --gold-16:rgba(212,145,73,.16); --gold-18:rgba(212,145,73,.18);
  --gold-20:rgba(212,145,73,.2);  --gold-30:rgba(212,145,73,.3);
  --gold-32:rgba(212,145,73,.32);

  /* surfaces */
  --input-bg:#27434a; --input-bg-focus:#31545b; --option-bg:#18333b;
  --muted-cream-1:#43555c; --muted-cream-2:#54646b;
  --muted-cream-3:#5d6d74; --muted-cream-4:#66777e;

  /* typography */
  --font-body:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  --font-display:'Readex Pro','IBM Plex Sans Arabic',sans-serif;

  /* type scale */
  --fs-h1:clamp(36px,3.7vw,58px);
  --fs-h2:clamp(38px,5.3vw,76px);
  --fs-h2-contact:clamp(44px,6.7vw,90px);
  --fs-h2-typewriter:clamp(30px,2.8vw,42px);
  --fs-h3:clamp(20px,1.7vw,25px);
  --fs-lead:clamp(16px,1.4vw,21px);
  --fs-lead-sm:clamp(15px,1.1vw,18px);
  --fs-body:clamp(16px,1.2vw,19px);
  --fs-nav:clamp(15px,1.25vw,19px);
  --fs-label:12px;
  --fs-label-mini:11px;
  --fs-section-label:clamp(15px,1.1vw,18px);
  --fs-section-label-lg:clamp(18px,1.4vw,22px);
  --fs-stat:clamp(34px,4vw,58px);
  --fs-caption:clamp(30px,3.2vw,48px);
  --fs-countup:clamp(20px,1.7vw,25px);
  --fs-channel:clamp(21px,2vw,27px);

  /* spacing */
  --pad-section:clamp(88px,13vh,168px) clamp(24px,7vw,120px);
  --pad-hero:clamp(96px,15vh,150px) clamp(24px,7vw,120px) 130px;
  --pad-contact:clamp(70px,10vh,130px) clamp(24px,7vw,120px) 0;
  --gutter:clamp(24px,7vw,120px);
  --gutter-nav:clamp(20px,5vw,64px);
  --container:1240px;
  --container-hero:1120px;

  /* radii */
  --r-pill:999px; --r-card:22px; --r-shell:18px; --r-media:14px;
  --r-chip:12px; --r-input:11px; --r-tile:10px; --r-link:9px;
  --r-inner:8px; --r-hair:2px;

  /* shadows */
  --sh-card:0 18px 55px rgba(12,28,38,.14);
  --sh-card-focus:0 0 0 3px var(--accent,#d49149),0 18px 55px rgba(12,28,38,.2);
  --sh-panel:0 22px 70px rgba(0,0,0,.35);
  --sh-hover-gold:0 16px 44px rgba(212,145,73,.18);
  --sh-input-focus:0 0 0 3px rgba(212,145,73,.3);

  /* motion */
  --ease-ons:cubic-bezier(.2,.7,.2,1);
  --ons3-marquee-duration:45s;
}

/* ============================================================
   2. RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0}

img,video{max-width:100%;height:auto;display:block}

button,input,select,textarea{font:inherit}

/* ============================================================
   3. BASE
   ============================================================ */
body{
  background:var(--ons-deep);
  color:var(--ons-cream);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,[data-typewriter],[data-countup]{font-family:var(--font-display);font-weight:500}

[data-countup]{font-size:var(--fs-countup);line-height:1.4}

/* ============================================================
   4. ACCESSIBILITY HELPERS
   ============================================================ */
.screen-reader-text{
  border:0;
  clip-path:inset(50%);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  white-space:nowrap;
  width:1px;
}

.screen-reader-text:focus{
  background-color:var(--ons-cream);
  clip-path:none;
  color:var(--ons-deep);
  display:block;
  font-size:var(--fs-label);
  height:auto;
  inset-block-start:5px;
  inset-inline-start:5px;
  line-height:normal;
  padding:15px 23px 14px;
  text-decoration:none;
  width:auto;
  z-index:100000;
}

.ons3-skip{
  position:absolute;
  inset-block-start:-100%;
  inset-inline-start:16px;
  z-index:100000;
  padding:12px 20px;
  border-radius:var(--r-link);
  background:var(--ons-cream);
  color:var(--ons-deep);
  font-size:var(--fs-label);
  text-decoration:none;
}

.ons3-skip:focus{inset-block-start:16px}

/* ============================================================
   5. RTL
   ============================================================ */
[dir="rtl"] [data-track]{letter-spacing:normal !important;text-transform:none !important}

/* ============================================================
   6. KEYFRAMES
   ============================================================ */
@keyframes scrollDot{0%{transform:translateY(-10px);opacity:0}30%{opacity:1}100%{transform:translateY(30px);opacity:0}}
@keyframes onsSpin{to{transform:rotate(360deg)}}
@keyframes onsCaret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes onsBlobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-6%) scale(1.12)}}
@keyframes onsBlobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,5%) scale(1.08)}}
@keyframes onsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes onsMarqueeRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ============================================================
   7. REVEAL / STAGGER BASE STATE (driven by motion.js)
   ============================================================ */
/* spec-behaviour.md §1 vs §2: the 28px/900ms reveal and the 34px/800ms stagger item
   are two different motions — "keep the difference". */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-ons),transform .9s var(--ease-ons);
}

[data-stagger-item]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s var(--ease-ons),transform .8s var(--ease-ons);
}

[data-reveal].is-in,[data-stagger-item].is-in{opacity:1;transform:none}

/* ============================================================
   8. REDUCED MOTION
   Source §12 kills transitions on the slides/reveals only; per §12 and G18 the
   universal rule below extends that to the blobs, beam spin, caret and scroll dot.
   The logo marquee's own fallback lives in clients.css, which loads after this file.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  [data-theme-slide],[data-reveal],[data-stagger-item]{transition:none !important;animation:none !important}

  [data-reveal],[data-stagger-item]{opacity:1;transform:none}
}