/* شهاب — design tokens.

   The palette is a system, not an inventory. Every colour has a level and a
   job: canvas (white / warm paper / soft / blue tint), brand (navy, blue,
   sky), editorial red (breaking / live), and the desk accents that only the
   special-files shelf may use. Text carries three weights and the lines two,
   because nine greys and ten off-whites were nine and ten decisions nobody
   was making.

   The old --sh-* names stay at the bottom as aliases onto that system, so the
   twelve stylesheets keep resolving while the values come from one place.
   Spacing is deliberately not tokenised: 62 distinct gaps and 176 paddings
   would gain names without gaining meaning. */

/* cascade layers, in order: defaults for the mark, then the responsive layer.
   Unlayered rules (tokens, base, header, footer, components, pages/*) beat both
   for normal declarations, which reproduces inline-over-stylesheet exactly. */
@layer marks, responsive;

:root{
  /* --- brand ------------------------------------------------------------ */
  --color-brand-navy:#0a1a33;        /* topbar, footer, hero panel, Gaza, video stage */
  --color-brand-navy-2:#0f2a4f;      /* surfaces inside dark blocks, image fallback */
  --color-brand-blue:#1b5aa6;        /* masthead, mark, links, selected, rules */
  --color-brand-blue-deep:#164b8a;   /* the one hover / pressed for blue controls */
  --color-brand-sky:#7ea8dd;         /* text, marks and outlines on navy */

  /* --- surfaces --------------------------------------------------------- */
  --color-surface:#ffffff;
  --color-surface-warm:#fbfaf7;      /* editorial paper: the files shelf, dossiers */
  --color-surface-soft:#f5f7fa;      /* cool light: secondary panels, hover */
  --color-surface-blue:#edf2f8;      /* functional tint: selected rows, live hover */

  /* --- text ------------------------------------------------------------- */
  --color-text:#14233a;
  --color-text-2:#4a5568;
  --color-text-muted:#5d6b7d;        /* the only muted small text — 5.4:1 on white */
  --color-text-faint:#8a95a6;        /* decorative numerals only, never body copy */
  --color-on-dark:#ffffff;
  --color-on-dark-2:rgba(255,255,255,.78);
  --color-on-dark-line:rgba(255,255,255,.14);
  --color-scrim:rgba(10,26,51,.86);  /* the one veil under text on a picture */

  /* --- lines ------------------------------------------------------------ */
  --color-border:#d5dde8;
  --color-border-soft:#eef2f7;

  /* --- editorial red ---------------------------------------------------- */
  --color-red:#e0302f;               /* breaking only: ticker tag, hero badge, reel */
  --color-red-soft:#bf2f32;          /* live dot and word, timeline mark, Gaza dot */

  /* --- desks (the special-files shelf only) ----------------------------- */
  --color-desk-politics:#1b5aa6;
  --color-desk-war:#9e2f36;
  --color-desk-land:#5f6b3a;
  --color-desk-economy:#7c6230;      /* was #9c7c3c: white on it now 5.8:1 */
  --color-desk-rights:#5d6b7d;

  /* --- text on dark, by opacity ----------------------------------------- */
  --sh-on-dark-90:rgba(255,255,255,.9);
  --sh-on-dark-86:rgba(255,255,255,.86);
  --sh-on-dark-82:rgba(255,255,255,.82);
  --sh-on-dark-80:rgba(255,255,255,.8);
  --sh-on-dark-75:rgba(255,255,255,.75);
  --sh-on-dark-72:rgba(255,255,255,.72);
  --sh-on-dark-60:rgba(255,255,255,.6);
  --sh-on-dark-55:rgba(255,255,255,.55);
  --sh-on-dark-30:rgba(255,255,255,.3);
  --sh-on-dark-16:rgba(255,255,255,.16);
  --sh-on-dark-14:rgba(255,255,255,.14);
  --sh-on-dark-08:rgba(255,255,255,.08);
  --sh-navy-a28:rgba(10,26,51,.28);

  /* --- type ------------------------------------------------------------- */
  --sh-font:'Neue Helvetica Arabic','Almarai',sans-serif;
  --sh-serif:'Neue Helvetica Arabic','Almarai',sans-serif;   /* one family now: the reading face is the naming face */
  --sh-font-stack:'Neue Helvetica Arabic','Almarai',system-ui,sans-serif;

  /* --- layout ----------------------------------------------------------- */
  --sh-container:1400px;           /* content 1336: fills 1366–1536 laptops, still framed on 1920 */

  /* --- aliases: the old names, resolved on the system above -------------- */
  --sh-navy:var(--color-brand-navy);
  --sh-navy-2:var(--color-brand-navy-2);
  --sh-blue:var(--color-brand-blue);
  --sh-sky:var(--color-brand-sky);
  --sh-red:var(--color-red);
  --sh-ink:var(--color-text);
  --sh-ink-2:var(--color-text-2);
  --sh-mute:var(--color-text-muted);
  --sh-mute-2:var(--color-text-muted);
  --sh-hair:var(--color-border-soft);
  --sh-hair-2:var(--color-border);
  --sh-hair-3:var(--color-border);
  --sh-hair-4:var(--color-border-soft);
  --sh-hair-6:var(--color-surface-soft);
  --sh-grey-1:var(--color-border);
  --sh-grey-2:var(--color-text-muted);
  --sh-grey-3:var(--color-text-muted);
}
