/* ============================================================================
   RAAS Editorial — Design System  (CANONICAL, control-tower-wide)
   ----------------------------------------------------------------------------
   Owner: Raz (RaaS / Project 65).  First used: raz-holistic-synthesis 2026-05-26.
   Roy 2026-05-26: "ה-design system הזה תשמור בבקשה... ממש יפה. אני מאוד אוהב אותו."
   Roy 2026-05-29: locked as the canonical DS for the whole control tower, his
   internal site, and all plans (recorded in Roy-HQ/packages/raas-editorial/CANONICAL.md).

   Aesthetic: warm editorial. A descendant of the Metronics deck (black/white/yellow),
   warmed into off-white paper + near-black ink + a single gold accent + dark callouts.
   RTL-first, mobile-first, long-form reading.

   --- CONVENTIONS (locked with Boris 2026-05-29) -----------------------------
   1. Tokens live in :root, GLOBAL.
   2. Every component class is namespaced with a `raas-` PREFIX and is fully
      self-contained — NO `.raas` wrapper to remember, NO bare-global generic
      names. Link the file, use the class, it works. (This kills the old
      silent-failure trap where forgetting the wrapper rendered nothing.)
   3. Editorial base typography (h1/h2/p/em/ul/li) is applied globally to any
      page that links this file — that is the point of a reading DS.
   4. Source of truth = ~/RaaS/design-system/raas-editorial.css. Boris syncs
      ONE-DIRECTIONAL RaaS -> Roy-HQ/packages/raas-editorial/. Never edit the
      downstream copy; it can only refork.

   Usage: link this file; for a centered reading column wrap content in
   <div class="raas-wrap">. Components: raas-hero, raas-section, raas-q,
   raas-pull, raas-callout, raas-box, raas-two, raas-tag, raas-axis,
   raas-raz, raas-stamp, raas-footer (see below).
   ============================================================================ */

/* ---- Design tokens (global) ---------------------------------------------- */
:root{
  --bg:#faf8f3;        /* paper             */
  --ink:#15130f;       /* primary text      */
  --muted:#5c564c;     /* secondary text    */
  --line:#e4ddcf;      /* hairlines/borders */
  --gold:#e0a82e;      /* accent            */
  --gold-deep:#b3801b; /* accent text/links */
  --card:#fffdf8;      /* raised surface    */
  --quote:#2b2620;     /* quote text        */
  --ink-box:#1d1a14;   /* dark callout bg   */
  --ink-text:#f1ead9;  /* dark callout text */
}

/* ---- Base / reset + page typography -------------------------------------- */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  direction:rtl;
  background:var(--bg);
  color:var(--ink);
  font-family:"Heebo","Assistant","Segoe UI","Arial Hebrew",system-ui,sans-serif;
  line-height:1.75;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}

/* ---- Editorial element typography (global on any page linking the DS) ---- */
h1{font-size:clamp(30px,6vw,46px);line-height:1.15;margin:14px 0 12px;font-weight:800;letter-spacing:-0.01em}
h2{font-size:clamp(22px,4.5vw,30px);margin:6px 0 18px;font-weight:800;line-height:1.2}
p{margin:0 0 18px}
ul{margin:0 0 18px;padding-inline-start:22px}
li{margin-bottom:10px}
/* <em> rendered as a soft gold marker stroke, not italic */
em{font-style:normal;background:linear-gradient(transparent 62%, #f4e3b0 62%);padding:0 2px}

/* ---- Layout container ----------------------------------------------------- */
.raas-wrap{max-width:760px;margin:0 auto;padding:64px 22px 120px}

/* ---- Agent indicator — ORG DEFAULT = "sideline" (Roy-decided 2026-05-27) --
   Light only: a thin accent line down the content edge + a small corner stamp.
   NEVER a full-page background (Roy: "יאייף לי את העיניים"). Differentiation is
   by the agent's accent var (--gold) only. Override --gold per agent.            */
body.raas-agent .raas-wrap{border-inline-start:3px solid var(--gold)}
.raas-stamp{position:fixed;top:14px;inset-inline-start:14px;z-index:50;
  font-size:12px;font-weight:700;color:var(--gold-deep);background:var(--card);
  border:1px solid var(--line);border-radius:99px;padding:4px 12px}
.raas-stamp .d{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--gold);margin-inline-end:6px;vertical-align:middle}

/* ---- Hero / header -------------------------------------------------------- */
.raas-hero{border-bottom:3px solid var(--ink);padding-bottom:30px;margin-bottom:60px}
.raas-kicker{font-size:13px;letter-spacing:.18em;color:var(--gold-deep);font-weight:700;text-transform:uppercase}
.raas-sub{color:var(--muted);font-size:17px;margin:0}
.raas-byline{margin-top:22px;font-size:14px;color:var(--muted)}
.raas-byline b{color:var(--ink)}

/* ---- Sections ------------------------------------------------------------- */
.raas-section{margin:54px 0;scroll-margin-top:20px}
.raas-num{font-size:13px;font-weight:800;color:var(--gold-deep);letter-spacing:.1em}
.raas-lead{font-size:20px;color:var(--quote)}

/* ---- Highlight (explicit span; use sparingly on the one phrase that matters) */
.raas-hl{background:linear-gradient(transparent 62%, #f4e3b0 62%);padding:0 2px}

/* ---- Quote block (RTL accent bar on the right) ---------------------------- */
.raas-q{border-right:4px solid var(--gold);background:var(--card);margin:24px 0;
  padding:18px 22px;border-radius:4px;font-size:18px;color:var(--quote)}
.raas-q .src{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

/* ---- Pull quote / big statement ------------------------------------------- */
.raas-pull{font-size:clamp(22px,5vw,30px);font-weight:800;line-height:1.3;margin:34px 0;
  color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.raas-pull span{color:var(--gold-deep)}

/* ---- Two-column grid + box cards (collapses to 1 col on narrow screens) ---- */
.raas-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
@media(max-width:560px){.raas-two{grid-template-columns:1fr}}
.raas-box{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.raas-box h4{margin:0 0 6px;font-size:15px;color:var(--gold-deep)}
.raas-box p{margin:0;font-size:15px;color:var(--muted)}

/* ---- Dark callout (an aside / a direct note to the reader) ----------------- */
.raas-callout,.raas-raz{background:var(--ink-box);color:var(--ink-text);border-radius:10px;padding:22px 24px;margin:26px 0}
.raas-callout .lbl,.raas-raz .lbl{font-size:12px;letter-spacing:.16em;color:var(--gold);font-weight:700;text-transform:uppercase}
.raas-callout p,.raas-raz p{margin:10px 0 0;color:#e8e0cf}

/* ---- Axis widget (dark inverted panel with a marker dot on a bar) ---------- */
.raas-axis{background:var(--ink);color:#f4efe4;border-radius:10px;padding:24px;margin:24px 0}
.raas-axis .row{display:flex;justify-content:space-between;font-weight:700;font-size:15px;color:#d9b760}
.raas-axis .bar{height:2px;background:#4a4338;margin:12px 0;position:relative}
.raas-axis .dot{width:12px;height:12px;border-radius:50%;background:var(--gold);position:absolute;top:-5px;left:50%;transform:translateX(-50%)}
.raas-axis .cap{font-size:14px;color:#bcb3a3;text-align:center;margin:0}

/* ---- Tag pill ------------------------------------------------------------- */
.raas-tag{display:inline-block;font-size:12px;color:var(--gold-deep);border:1px solid var(--line);
  border-radius:99px;padding:3px 11px;margin:2px 4px 2px 0;background:var(--card)}

/* ---- Footer --------------------------------------------------------------- */
.raas-footer{margin-top:80px;border-top:3px solid var(--ink);padding-top:24px;color:var(--muted);font-size:14px}