@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap');

:root{
  /* colors */
  --in-light:#45896B;--in-base:#2D6A4F;--in-dark:#18412F;
  --on-light:#F3A11F;--on-base:#D4860A;--on-dark:#AB6900;
  --at-light:#DF6C44;--at-base:#C0522B;--at-dark:#973A19;
  --white-light:#FEFCFA;--white-base:#F6F2EA;--white-dark:#CDC7BB;
  --dark-light:#4D4D46;--dark-base:#1A1A18;--dark-dark:#060605;
  /* stay this color regardless of theme — text/surfaces that sit on a fixed
     (brand-colored or literal-white) background, not on the page's own chrome */
  --fixed-light:#FEFCFA;--fixed-dark:#1A1A18;
  --surface-page:var(--white-light);
  --surface-card:var(--white-base);
  --surface-card-border:var(--white-dark);
  --text-primary:var(--dark-base);
  --text-secondary:var(--dark-light);
  --text-on-color:var(--fixed-light);
  --link:var(--in-base);
  --link-hover:var(--in-dark);
  --focus-ring:var(--on-base);
  /* accent used for points, active/selected states, add actions and prices —
     green in light mode, swapped to amber in dark mode below */
  --accent-highlight:var(--in-base);

  /* type */
  --font-brand:'Tajawal',sans-serif;
  --fw-light:300;--fw-regular:400;--fw-medium:500;--fw-bold:700;--fw-black:900;
  --text-display:clamp(2.5rem,5vw,4.5rem);
  --text-h1:clamp(2rem,3.5vw,3rem);
  --text-h2:clamp(1.5rem,2.5vw,2.125rem);
  --text-h3:1.5rem;
  --text-body-lg:1.125rem;
  --text-body:1rem;
  --text-small:0.875rem;
  --text-micro:0.75rem;
  --lh-tight:1.1;--lh-heading:1.25;--lh-body:1.6;
  --ls-tight:-0.01em;--ls-wide:0.08em;

  /* spacing / shape / motion */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-full:999px;
  --shadow-sm:0 1px 2px rgba(6,6,5,0.06);
  --shadow-md:0 4px 12px rgba(6,6,5,0.10);
  --shadow-lg:0 12px 32px rgba(6,6,5,0.14);
  --border-hairline:1px solid var(--white-dark);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;
}

html[dir="rtl"] body{font-family:var(--font-brand)}
body{font-family:var(--font-brand)}

/* dark theme: flip the neutral palette only — brand colors (in/on/at) and the
   fixed tokens stay put, everything derived from the white/dark scale recolors */
:root[data-theme="dark"]{
  --white-light:#171613;--white-base:#221F1A;--white-dark:#3A362E;
  --dark-light:#C9C4B8;--dark-base:#F6F2EA;--dark-dark:#FEFCFA;
  --accent-highlight:var(--on-base);
}