/* Design tokens: the only place colours, font sizes, radii, shadows and page spacing are written.
   Colours follow source/dark.css (the night theme); sizes and spacing follow source/design-v2.template.html.
   Every other CSS file (and the hero shader in js/sections/home-hero.js) reads these variables. Load this file first. */
@font-face{font-family:"Wathiq";src:url("../fonts/itfWathiq-Regular.woff2") format("woff2"),url("../fonts/itfWathiq-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Wathiq";src:url("../fonts/itfWathiq-Bold.woff2") format("woff2"),url("../fonts/itfWathiq-Bold.otf") format("opentype");font-weight:700;font-display:swap}

:root{
  color-scheme: dark;

  /* ---------- brand red ---------- */
  --red:#E32542;            /* logo red */
  --red-press:#C81D38;      /* pressed fill */
  --red-deep:#B4122C;       /* label colour on white glow buttons */
  --red-on-dark:#FF5A70;    /* red for small text and glows on dark */
  --red-wash:#2A1217;       /* faint red surface */
  --on-red:#FFFFFF;         /* text on red */
  --on-red-2:#FFE6EA;       /* secondary text on red */
  --red-a14:rgba(227,37,66,.14);
  --red-a18:rgba(227,37,66,.18);
  --red-a35:rgba(227,37,66,.35);
  --red-a70:rgba(227,37,66,.7);
  --mark-glow-0:rgba(234,35,72,0);     /* hero mark glow, off */
  --mark-glow-35:rgba(234,35,72,.35);
  --mark-glow-55:rgba(234,35,72,.55);

  /* ---------- night surfaces and text (source/dark.css) ---------- */
  --paper:#0F0D0E;          /* site surface */
  --mist:#1A1718;           /* raised cards */
  --line:#2E2829;
  --char:#CFC9CA;           /* body text, 11.9:1 on --paper */
  --grey:#9E9798;           /* secondary text, 6.8:1 on --paper */
  --head:#F7F4F4;           /* headings */
  --title:var(--head);      /* section titles */
  --ink:#1E1A1B;            /* "dark" sections, one step above the page */
  --ink-2:#2A2526;
  --ink-line:#3A3435;
  --on-ink:#F4F2F2;
  --on-ink-2:#B9B3B4;
  --white:#FFFFFF;
  --border-strong:#4A4344;  /* ghost buttons, inputs on ink */
  --border-hover:#8A8284;
  --field-border:#3E3738;
  --field-bg-ink:#262122;   /* inputs that sit on --ink */
  --placeholder:#7A7374;
  --placeholder-ink:#9A9294;
  --disabled-bg:var(--ink-2);
  --disabled-fg:#6F6869;
  --stripe-1:var(--ink);    /* placeholder logo stripes */
  --stripe-2:#242021;
  --ok-bg:#12261A;
  --ok-fg:#9FD9B2;
  --ok-strong:#C6EBD2;
  --thumb-bg:#2A2425;       /* empty work image */
  --hero-base:#0B0A0A;      /* home hero, behind the shader */

  /* ---------- see-through layers ---------- */
  --nav-glass:rgba(15,13,14,.84);
  --button-glass:rgba(15,13,14,.7);
  --white-a03:rgba(255,255,255,.03);
  --white-a22:rgba(255,255,255,.22);
  --white-a62:rgba(255,255,255,.62);
  --white-a75:rgba(255,255,255,.75);
  --white-a85:rgba(255,255,255,.85);
  --hero-shade-55:rgba(8,7,7,.55);
  --hero-shade-15:rgba(8,7,7,.15);
  --hero-glow-1:rgba(142,20,40,.38);
  --hero-glow-2:rgba(90,12,26,.35);
  --page-glow-1:rgba(140,20,38,.7);
  --page-glow-2:rgba(85,11,24,.42);
  --page-glow-3:rgba(50,8,16,.12);
  --card-shade:rgba(0,0,0,.35);       /* side cards in the work carousel */

  /* placeholder art (to be replaced by real work images) */
  --ph-video-1:#C4553F; --ph-video-2:#3A2622; --ph-video-3:#1D1617;

  /* hero shader palette (read by js/sections/home-hero.js) */
  --shader-0:#090808; --shader-1:#660F1C; --shader-2:#33080F; --shader-3:#0F0D0D; --shader-4:#1C050A;

  /* ---------- masks: fluted frosted glass ribs, edge fade ---------- */
  --mask-flute-glow:repeating-linear-gradient(90deg,rgba(0,0,0,.38) 0,rgba(0,0,0,.55) 5px,rgba(0,0,0,.85) 10px,rgba(0,0,0,.55) 15px,rgba(0,0,0,.38) 20px);
  --mask-flute-hero:repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.75) 6px,rgba(0,0,0,1) 11px,rgba(0,0,0,.75) 16px,rgba(0,0,0,.4) 22px);
  --vm-dark-1:#2B2729; --vm-dark-2:#0B0A0A;   /* mission card */
  --mask-fade-x:linear-gradient(90deg,transparent,rgba(0,0,0,1) 12%,rgba(0,0,0,1) 88%,transparent);

  /* ---------- shadows ---------- */
  --shadow-nav:0 10px 30px -18px rgba(26,23,24,.45);
  --shadow-dock:0 12px 30px -18px rgba(26,23,24,.35);
  --shadow-card:0 30px 60px -25px rgba(0,0,0,.8);
  --shadow-stack:0 -24px 60px -30px rgba(0,0,0,.7);
  --ring-focus:0 0 0 4px rgba(26,23,24,.08);
  --outline-glass:inset 0 0 0 1px var(--white-a75);

  /* ---------- type ---------- */
  --f:"Wathiq",Tahoma,"Segoe UI",sans-serif;
  --fw-regular:400;
  --fw-bold:400; /* the site uses the regular weight only, headings included */
  --fw-num:700;   /* the one exception: the big result numbers */
  --lh-body:1.75;
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-15-5:15.5px; --fs-16:16px; --fs-16-5:16.5px;
  --fs-17:17px; --fs-18:18px; --fs-19:19px; --fs-22:22px; --fs-24:24px; --fs-26:26px; --fs-28:28px; --fs-36:36px;
  --fs-body:var(--fs-17);
  --fs-hero:clamp(52px,7.4vw,108px);        /* home headline */
  --fs-hero-lead:clamp(17px,1.4vw,20px);    /* home line under the headline */
  --fs-page-title:clamp(36px,5vw,64px);     /* inner page h1 */
  --fs-services-title:clamp(40px,5vw,64px);
  --fs-about-title:clamp(36px,4.4vw,58px);
  --fs-about-name:clamp(44px,6.4vw,92px);    /* "وقت ميديا" in About */
  --fs-about-lead:clamp(20px,1.9vw,27px);
  --fs-brief-title:clamp(34px,4.6vw,60px);
  --fs-cta:clamp(28px,3.6vw,46px);
  --fs-section:clamp(28px,3.4vw,42px);      /* section h2 (.big) */
  --fs-card-title:clamp(28px,3.2vw,42px);   /* service card h2 */
  --fs-stat:clamp(16px,1.7vw,22px);
  --fs-plus:.66em;                          /* the small + after a stat */

  /* ---------- radii ---------- */
  --r-2:2px; --r-4:4px; --r-6:6px; --r-8:8px; --r-10:10px; --r-12:12px; --r-14:14px; --r-16:16px;
  --r-20:20px; --r-22:22px; --r-24:24px; --r-32:32px;
  --r-pill:999px; --r-round:50%;
  --r:var(--r-12);

  /* ---------- page spacing ---------- */
  --gutter:40px;            /* side padding of sections, desktop */
  --gutter-m:22px;
  --gutter-hero:64px;       /* side padding of the home hero, desktop */          /* side padding of sections, phone (≤760px) */
  --section-y:80px;         /* vertical padding of a standard section */
  --nav-small:56px;         /* height of the shrunk header, desktop */
  --nav-small-m:68px;       /* height of the shrunk header, phone */

  /* ---------- motion ---------- */
  --ease-out:cubic-bezier(.22,1,.36,1);     /* one curve for the whole site: fast start, long soft landing */
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease:var(--ease-out);
  --ease-ring:cubic-bezier(.2,.8,.2,1);      /* cursor ring */
  --ease-flow:cubic-bezier(.22,.8,.2,1);     /* work carousel */
  --rise:28px;                               /* distance for rise-in */
  --reveal-y:22px;                           /* distance for scroll reveals */
  --reveal-t:.7s;                            /* scroll reveal duration */
  --reveal-step:70ms;                        /* stagger between items in a group */
  --word-t:.9s;                              /* headline words rising out of their line */
  --word-step:60ms;
  --page-in:.42s;                            /* page fade on open */
  --progress-h:3px;                          /* reading progress bar */
}