/* ============================================================
   منصات العارف — هوية «كارت التفعيل»: ورق وحبر
   Design tokens — LOCKED. Every colour, size and radius on /platforms/
   comes from here; nothing else defines a value.
   ============================================================ */
:root {
  /* ---- الألوان ---- */
  --paper:     #F6F1E9;   /* page background */
  --paper-2:   #FBF8F3;   /* raised surfaces, inputs, pricing columns */
  --ink:       #1C1A17;   /* headings, body */
  --ink-muted: #6B655B;   /* secondary text, labels */
  --rule:      #D9CFC0;   /* borders, dividers, table rules */
  --stamp:     #C8371F;   /* accent — primary CTA, stamps, key numbers, active */
  --stamp-ink: #FFFFFF;   /* text on --stamp */
  --moss:      #2F4F3E;   /* secondary — success ticks, «مُفعّل», footer */
  --moss-soft: #E4EBE6;   /* tinted backgrounds for moss blocks */

  /* ---- حالات (derived from the locked palette — no new hues) ---- */
  --ok:        var(--moss);          /* success text/border */
  --ok-soft:   var(--moss-soft);     /* success background */
  --err:       var(--stamp);         /* error text/border */
  --err-soft:  #F8E4E0;              /* error background: stamp at ~12% on paper */
  --warn:      #8A6400;              /* warning text (amber ink) */
  --warn-soft: #F6EBD2;              /* warning background */
  --info-soft: var(--paper-2);       /* neutral note background */

  /* ---- الخطوط (self-hosted, static/fonts/saas/) ---- */
  --font-head: 'IBM Plex Sans Arabic', 'Readex Pro', system-ui, sans-serif;
  --font-body: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- سلّم الأحجام (rem) — mobile values; desktop overrides at 1024px ---- */
  --fs-display: 2.5rem;
  --fs-h2:      1.75rem;
  --fs-h3:      1.25rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;
  --lh-head:    1.25;
  --lh-body:    1.7;

  /* ---- المسافات ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: var(--s-8);          /* 64px mobile → 96px desktop */
  --content-max: 1120px;

  /* ---- الزوايا والظل الوحيد ---- */
  --r-input: 4px;
  --r-card:  8px;
  --shadow-offset: 4px 4px 0 var(--rule);

  /* ---- اللمس والطبقات ---- */
  --tap: 44px;                       /* minimum hit area for anything tappable */
  --z-nav: 20; --z-toast: 40; --z-modal: 50;

  /* ---- الحركة الوحيدة ---- */
  --motion: 300ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 4.5rem;
    --fs-h2:      2.75rem;
    --fs-h3:      1.5rem;
    --fs-body:    1.125rem;
    --section-y:  var(--s-9);
  }
}