/* ============================================================
   Yaqazah — Design Tokens
   ============================================================ */
:root {
  /* ===== Brand from logo ===== */
  --c-forest:        #2D5043;
  --c-forest-deep:   #1F3A30;
  --c-forest-soft:   #3D6453;
  --c-sage:          #7A9A7A;
  --c-sage-soft:     #A8C0A6;
  --c-sun:           #E8A05C;
  --c-sun-deep:      #C97F3D;
  --c-sun-soft:      #F2C28A;
  --c-sand:          #D4B98F;
  --c-sand-soft:     #ECDCBE;
  --c-cream:         #FBF7EF;
  --c-cream-2:       #F4ECDB;
  --c-cream-3:       #ECE2C8;
  --c-ink:           #1A1F1B;
  --c-ink-soft:      #2C342E;
  --c-ink-muted:     #5C665E;
  --c-ink-light:     #8B948D;
  --c-line:          #E5DDC9;
  --c-line-soft:     #F0E8D5;
  --c-white:         #FFFFFF;
  --c-rose:          #B85C5C;     /* sparingly: errors / archive */
  --c-emerald:       #4A8B6B;     /* sparingly: success */

  /* ===== Semantic ===== */
  --bg:           var(--c-cream);
  --bg-dark:      var(--c-forest-deep);
  --surface:      var(--c-white);
  --surface-2:    var(--c-cream-2);
  --surface-3:    var(--c-cream-3);
  --text:         var(--c-ink);
  --text-soft:    var(--c-ink-soft);
  --text-muted:   var(--c-ink-muted);
  --text-light:   var(--c-ink-light);
  --primary:      var(--c-forest);
  --primary-deep: var(--c-forest-deep);
  --accent:       var(--c-sun);
  --accent-deep:  var(--c-sun-deep);
  --link:         var(--c-forest);
  --link-hover:   var(--c-sun-deep);
  --border:       var(--c-line);
  --border-soft:  var(--c-line-soft);

  /* ===== Typography ===== */
  --font-display: "Thmanyah Serif Display", "Times New Roman", "Amiri", serif;
  --font-body:    "Thmanyah Sans", "Segoe UI", "Tahoma", "Helvetica", "Arial", sans-serif;

  /* Type scale (modular ~1.2) */
  --fs-xs:    .8125rem;   /* 13 */
  --fs-sm:    .9375rem;   /* 15 */
  --fs-base:  1rem;       /* 16 */
  --fs-md:    1.125rem;   /* 18 */
  --fs-lg:    1.25rem;    /* 20 */
  --fs-xl:    1.5rem;     /* 24 */
  --fs-2xl:   2rem;       /* 32 */
  --fs-3xl:   2.625rem;   /* 42 */
  --fs-4xl:   3.5rem;     /* 56 */
  --fs-hero:  clamp(2.5rem, 6vw, 5rem);

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;
  --lh-prose:   1.95;

  /* Weight */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* ===== Spacing (4-px base) ===== */
  --s-1:  .25rem;
  --s-2:  .5rem;
  --s-3:  .75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* ===== Layout ===== */
  --container:  1200px;
  --container-narrow: 920px;
  --reading:    720px;
  --header-h:   72px;

  /* ===== Radius ===== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* ===== Shadow ===== */
  --shadow-1: 0 1px 2px rgba(31,58,48,.06), 0 1px 1px rgba(31,58,48,.04);
  --shadow-2: 0 6px 20px rgba(31,58,48,.08), 0 2px 6px rgba(31,58,48,.05);
  --shadow-3: 0 18px 40px rgba(31,58,48,.14), 0 6px 14px rgba(31,58,48,.07);
  --shadow-glow: 0 0 0 6px rgba(232,160,92,.18);

  /* ===== Motion ===== */
  --ease:        cubic-bezier(.4, .15, .25, 1);
  --ease-out:    cubic-bezier(.16, .68, .42, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .15s;
  --dur-2: .3s;
  --dur-3: .55s;
  --dur-4: .9s;

  /* ===== Z-index ===== */
  --z-bg:      0;
  --z-base:    10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ===== Per-category accent (set via class on an element) ===== */
[data-cat="news"]           { --cat-color: #2D5043; }
[data-cat="articles"]       { --cat-color: #7A9A7A; }
[data-cat="reports"]        { --cat-color: #4A6B5A; }
[data-cat="investigations"] { --cat-color: #1F3A30; }
[data-cat="interviews"]     { --cat-color: #E8A05C; }
[data-cat="infographics"]   { --cat-color: #C49A55; }