/* ============================================================
   MYZADAK — design tokens + base
   Colour values are sampled from the MYZADAK Android app UI.
   ============================================================ */

/* --- Latin: Plus Jakarta Sans (OFL, self-hosted) ----------- */
@font-face{font-family:"Jakarta";src:url("../fonts/jakarta-400.woff2") format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"Jakarta";src:url("../fonts/jakarta-600.woff2") format("woff2");font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:"Jakarta";src:url("../fonts/jakarta-700.woff2") format("woff2");font-weight:700;font-display:swap;font-style:normal}

/* --- Arabic: IBM Plex Sans Arabic (OFL, self-hosted) ------- */
@font-face{font-family:"PlexAr";src:url("../fonts/plexar-400.woff2") format("woff2");font-weight:400 500;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"PlexAr";src:url("../fonts/plexar-600.woff2") format("woff2");font-weight:600 700;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41}

:root{
  --font-latin:"Jakarta",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-arabic:"PlexAr","Noto Sans Arabic",system-ui,sans-serif;
  --font-body:var(--font-latin),var(--font-arabic);
  --font-display:var(--font-body);

  /* type scale — fluid, capped at 1440px */
  --step--1:clamp(.8125rem,.79rem + .11vw,.875rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.0625rem);
  --step-1:clamp(1.125rem,1.07rem + .28vw,1.3125rem);
  --step-2:clamp(1.375rem,1.26rem + .55vw,1.75rem);
  --step-3:clamp(1.625rem,1.42rem + 1vw,2.3rem);
  --step-4:clamp(2rem,1.66rem + 1.6vw,3.1rem);
  --step-5:clamp(2.4rem,1.9rem + 2.4vw,4.05rem);
  --step-6:clamp(2.75rem,2.05rem + 3.4vw,5rem);

  --leading-tight:1.05;
  --leading-snug:1.24;
  --leading-body:1.62;
  --tracking-display:-.028em;
  --measure:60ch;
  --measure-ar:52ch;

  --weight-regular:400;
  --weight-semibold:600;
  --weight-bold:700;

  /* spacing */
  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-s:1rem;
  --space-m:1.5rem;  --space-l:2rem;    --space-xl:3rem;    --space-2xl:4rem;
  --space-3xl:clamp(4.5rem,3rem + 6vw,7.5rem);
  --space-4xl:clamp(6rem,3.5rem + 9vw,10.5rem);

  /* layout */
  --container:74rem;
  --container-narrow:40rem;
  --container-wide:88rem;
  --gutter:clamp(1.25rem,.85rem + 1.9vw,2.5rem);
  --nav-h:4.5rem;

  /* radii */
  --radius-xs:8px; --radius-s:12px; --radius-m:20px; --radius-l:28px;
  --radius-device:2.25rem; --radius-pill:999px;

  /* motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-instant:120ms; --dur-fast:200ms; --dur-base:320ms; --dur-slow:560ms;
  --stagger:70ms;

  --z-nav:200; --z-overlay:300;

  /* ---------- colour: sampled from the app ---------- */
  --ink-900:#08070b;   /* deepest ground */
  --ink-800:#0e0d12;   /* app page background */
  --ink-700:#14131a;
  --ink-600:#1b1a21;   /* app card surface */
  --ink-500:#24232b;
  --ink-400:#34323d;
  --ink-300:#4a4854;

  --ember-900:#150e09;  /* warm band ground */
  --ember-800:#1f1610;
  --ember-700:#2d2018;  /* app chip brown */
  --ember-600:#3d2c1f;

  --brand-400:#f5a96d;
  --brand-500:#f0924c;  /* app primary orange */
  --brand-600:#e07d33;
  --coral-500:#ed6d52;  /* app gradient partner */

  --text-primary:#f6f4f1;
  --text-secondary:#b7b3ac;
  --text-muted:#8b877f;
  --text-on-brand:#150e07;

  --surface-page:var(--ink-800);
  --surface-deep:var(--ink-900);
  --surface-raised:var(--ink-600);
  --surface-raised-2:var(--ink-500);
  --surface-warm:var(--ember-700);

  --border-subtle:rgba(246,244,241,.07);
  --border-default:rgba(246,244,241,.12);
  --border-strong:rgba(246,244,241,.2);
  --border-brand:rgba(240,146,76,.45);

  --focus-ring:var(--brand-400);
  --shadow-soft:0 2px 8px rgba(0,0,0,.4);
  --shadow-lift:0 18px 40px -18px rgba(0,0,0,.75);
  --shadow-device:0 48px 90px -34px rgba(0,0,0,.9),0 14px 30px -18px rgba(0,0,0,.7);
  --glow-brand:radial-gradient(60% 60% at 50% 45%,rgba(240,146,76,.22),transparent 70%);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-block-start:calc(var(--nav-h) + 1.5rem);
  background:var(--surface-page);
  color-scheme:dark;
}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:var(--leading-body);
  font-weight:var(--weight-regular);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);
  text-wrap:balance;
  margin:0;
  color:var(--text-primary);
}
h2{font-size:var(--step-3)}
h3,h4{font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
p{margin:0;max-width:var(--measure);text-wrap:pretty}
ul,ol{margin:0}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-color:var(--border-strong);text-underline-offset:.22em}
strong{font-weight:var(--weight-semibold)}

::selection{background:rgba(240,146,76,.28);color:var(--text-primary)}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-xs)}

.skip-link{
  position:absolute;inset-block-start:-200%;inset-inline-start:var(--gutter);z-index:var(--z-overlay);
  padding:.7rem 1.1rem;background:var(--brand-500);color:var(--text-on-brand);
  border-radius:var(--radius-s);text-decoration:none;font-weight:var(--weight-semibold);
}
.skip-link:focus{inset-block-start:1rem}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Arabic / RTL ---------- */
[lang="ar"]{
  --font-body:var(--font-arabic),var(--font-latin);
  --tracking-display:0;
  --measure:var(--measure-ar);
  --leading-tight:1.3;
  --leading-snug:1.45;
  --leading-body:1.85;
}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{padding-block-end:.06em}
[dir="rtl"] .icon-directional{transform:scaleX(-1)}

/* Latin brand name inside Arabic text keeps its own run + face */
.brand{font-family:var(--font-latin);font-weight:var(--weight-bold);letter-spacing:-.01em}
[lang="ar"] .brand{direction:ltr;unicode-bidi:isolate}

.num{font-variant-numeric:tabular-nums}

@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-reveal]{opacity:1!important;transform:none!important}
}