/* نَجْم — design tokens. The ONLY place colour, type, radius, shadow and motion values are defined (DESIGN.md). */
:root {
  /* colour roles */
  --night: #0A0B14;          /* ground-deep (≤ 4 sections) */
  --night-2: #121527;        /* raised surface on night */
  --sky: #161B30;            /* sky gradient stop — never a text ground */
  --sand: #F2E8D9;           /* paper */
  --sand-2: #FBF7F0;         /* surface */
  --line: rgba(27, 22, 18, .14);
  --line-night: rgba(246, 231, 200, .16);
  --ink: #1B1612;
  --ink-2: #43392F;
  --ink-3: #6B5D4F;
  --star: #F6E7C8;
  --star-2: rgba(246, 231, 200, .80);
  --star-3: rgba(246, 231, 200, .64);
  --gold: #F2C77E;           /* accent on night: your star, values */
  --ochre: #8A4B1C;          /* accent on sand (text-safe) */
  --ember: #F07A3A;          /* action: primary CTA surface only */
  --ember-hover: #F58A4E;
  --ember-ink: #1A0E06;
  --danger: #B3261E;
  --focus-sand: #8A4B1C;
  --focus-night: #F2C77E;
  --haze: rgba(194, 101, 43, 1);

  /* type */
  --font-display: "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-text: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 24px;
  --d-h2: clamp(28px, 4.2vw, 44px);
  --d-h1: clamp(34px, 5.6vw, 64px);
  --d-num: clamp(40px, 6vw, 72px);
  --lh-display: 1.45;
  --lh-text: 1.9;
  --measure: 30em;

  /* shape & depth */
  --r-card: 18px;
  --r-ctl: 12px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(10, 11, 20, .08), 0 8px 24px -12px rgba(10, 11, 20, .18);
  --sh-ticket: 0 30px 60px -30px rgba(10, 11, 20, .45);
  --glass-bg: rgba(10, 11, 20, .38);
  --glass-edge: rgba(246, 231, 200, .14);

  /* space & layout */
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1200px;
  --sec-pad: clamp(72px, 11vw, 140px);
  --header-h: 64px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.5, .64, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-reveal: cubic-bezier(.65, 0, 0, 1);   /* reveals: slow start, long glide — the movement is visible, not a pop */

  /* sheets: sections that slide over the previous one */
  --r-sheet: clamp(24px, 4vw, 48px);
  --sh-sheet: 0 -24px 48px -32px rgba(10, 11, 20, .35);
}