/* ============================================================
   AdlFlow · Design Tokens · v1.0 · May 2026
   Forest + Sand · institutional, calm, Saudi-leaning.
   ============================================================ */

:root {
  /* --- Primary palette --------------------------------------- */
  --adl-green:        #0F3D2E;   /* the mark, the floor, the seal */
  --forest-600:       #1F5A45;
  --forest-900:       #0A2A20;
  --sand-100:         #E8DCC4;
  --civic-gold:       #C8A95B;
  --paper:            #F4EFE2;
  --ink:              #0E1A14;

  /* --- Neutral ramp (sand-warm) ------------------------------ */
  --neutral-050:      #FBF8F0;
  --neutral-100:      #F1ECDD;
  --neutral-200:      #E2DBC4;
  --neutral-300:      #C9C0A4;
  --neutral-400:      #A89F82;
  --neutral-500:      #7E7866;
  --neutral-600:      #5B5648;
  --neutral-700:      #403D33;
  --neutral-800:      #2A2822;
  --neutral-900:      #1A1814;

  /* --- Semantic --------------------------------------------- */
  --status-success:   #2F7E5B;   /* resolved */
  --status-pending:   #B8842B;   /* awaiting */
  --status-action:    #9B3A2A;   /* required */

  /* --- Dark mode surfaces ----------------------------------- */
  --surface-100:      #15241D;
  --surface-200:      #1F3A30;
  --surface-300:      #2A5043;

  /* --- Brand tints (800 → 050) ------------------------------ */
  --brand-tint-800:   #0A2A20;
  --brand-tint-700:   #0F3D2E;
  --brand-tint-600:   #1F5A45;
  --brand-tint-500:   #4A8470;
  --brand-tint-400:   #7BAA9A;
  --brand-tint-300:   #ABCBC0;
  --brand-tint-200:   #D6E5DF;
  --brand-tint-050:   #EEF5F1;

  /* --- Typography ------------------------------------------- */
  --font-en:    "IBM Plex Sans", Inter, system-ui, -apple-system, sans-serif;
  --font-ar:    "IBM Plex Sans Arabic", "Noto Naskh Arabic", Tajawal, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, Cambria, serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type scale (size / line-height) ---------------------- */
  --type-display:  80px;  --type-display-lh:  84px;   /* semibold */
  --type-h1:       56px;  --type-h1-lh:       60px;   /* semibold */
  --type-h2:       40px;  --type-h2-lh:       48px;   /* semibold */
  --type-h3:       28px;  --type-h3-lh:       36px;   /* medium */
  --type-body:     22px;  --type-body-lh:     30px;   /* regular */
  --type-caption:  18px;  --type-caption-lh:  26px;   /* regular */
  --type-label:    14px;  --type-label-lh:    20px;   /* mono, +.08em tracking */

  /* Arabic runs +4% size at the same line-heights */
  --ar-size-multiplier: 1.04;

  /* --- Weights ---------------------------------------------- */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  /* --- Spacing scale (8px base) ----------------------------- */
  --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;

  /* --- Radii ------------------------------------------------ */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* --- Motion ----------------------------------------------- */
  --ease-flow:   cubic-bezier(.2, .7, .1, 1);
  --dur-step:    240ms;
  --dur-page:    480ms;

  /* --- Grid ------------------------------------------------- */
  --grid-base:    8px;
  --grid-cols:    12;
  --grid-gutter:  24px;
  --grid-margin:  96px;
}

/* ===== Element defaults ===================================== */
/* color-scheme: light forces form controls + scrollbars to render light
   regardless of OS preference. Dark mode in the brand spec is buggy
   (--ink: var(--paper) collapses fg/bg to the same color), so disabled. */
html { color-scheme: light; font-family: var(--font-en); color: var(--ink); background: var(--paper); }
html[dir="rtl"] { font-family: var(--font-ar); }

body { font-size: var(--type-body); line-height: var(--type-body-lh); font-weight: var(--w-regular); }

h1 { font-size: var(--type-h1); line-height: var(--type-h1-lh); font-weight: var(--w-semibold); }
h2 { font-size: var(--type-h2); line-height: var(--type-h2-lh); font-weight: var(--w-semibold); }
h3 { font-size: var(--type-h3); line-height: var(--type-h3-lh); font-weight: var(--w-medium); }

/* All caps mono label — for section markers, IDs, timestamps */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-600);
}

/* Status pills */
.pill { display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: var(--radius-pill); font-size: 13px; font-weight: var(--w-medium); }
.pill--success { background: rgba(47,126,91,0.14); color: var(--status-success); }
.pill--pending { background: rgba(184,132,43,0.16); color: var(--status-pending); }
.pill--action  { background: rgba(155,58,42,0.14); color: var(--status-action); }