/* Illouz platform — design tokens.
   Decided by Dan, 26 August 2026. Import once; never hardcode a colour in a component.

   TWO CONTEXTS, NOT TWO THEMES:
     .ctx-product  — light. The public front door and the staff console.
     .ctx-social   — dark. Every graphic, share card and video frame.
   The palette is the same in both. What changes is which colour is the ground. */

:root{
  /* ---- brand constants. Identical in every context. ---- */
  --navy:          #02122D;   /* Dan's near-black navy. Sampled from published work. */
  --navy-raised:   #071A3C;
  --navy-line:     #1E3059;
  --gold:          #F9C823;   /* The single most valuable piece of visual equity. */
  --gold-warm:     #F8AC15;   /* Gradient partner on CTA bars only. */
  --gold-deep:     #8A6F1C;   /* Gold that has to sit next to text on light. */
  --party-cyan:    #20BAE1;   /* Yisrael Beiteinu. Party lockup only — plus Russian, see below. */
  --white:         #FFFFFF;
}

/* ================= PRODUCT — light ================= */
.ctx-product{
  --ground:       #F6F7F9;
  --surface:      #FFFFFF;
  --surface-sunk: #ECEFF3;
  --rule:         #DCE1E8;
  --rule-strong:  #C2CAD5;

  --ink:          #02122D;
  --ink-mid:      #38465E;
  --ink-muted:    #6B7A91;

  --accent:       #8A6F1C;   /* gold is unreadable as text on white — use gold-deep */
  --accent-fill:  #F9C823;   /* the real gold, as a FILL behind navy text */
  --accent-soft:  #FDF3D6;

  --primary:      #02122D;
  --primary-on:   #FFFFFF;

  --ok:   #1F6B47;  --ok-soft:   #DCEEE5;
  --warn: #9A6410;  --warn-soft: #FAEFD8;
  --crit: #A02D22;  --crit-soft: #F8DEDA;

  --shadow-1: 0 1px 2px rgba(2,18,45,.08);
  --shadow-2: 0 12px 30px -22px rgba(2,18,45,.5);
  color-scheme: light;
}

/* ================= SOCIAL — dark ================= */
.ctx-social{
  --ground:       #02122D;
  --surface:      #071A3C;
  --surface-sunk: #010D22;
  --rule:         #1E3059;
  --rule-strong:  #2C4478;

  --ink:          #FFFFFF;
  --ink-mid:      #B3C0DA;
  --ink-muted:    #7E8FB4;

  --accent:       #F9C823;   /* full gold. This is the look people recognise. */
  --accent-fill:  #F9C823;
  --accent-soft:  #12285A;

  --primary:      #F9C823;
  --primary-on:   #02122D;

  --ok:   #4ADE80;  --ok-soft:   #08301D;
  --warn: #F9C823;  --warn-soft: #33280A;
  --crit: #E4695A;  --crit-soft: #3A1714;

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 12px 30px -22px rgba(0,0,0,.9);
  color-scheme: dark;
}

/* ================= RUSSIAN ================= */
/* Decision 13: the party's cyan leads on Russian-language material, because that
   audience already reads it as meaningful. Deliberate, scoped, and the only place
   the identity is allowed to fracture. */
[lang="ru"].ctx-social,  .ctx-social [lang="ru"]{
  --accent: var(--party-cyan);
  --primary: var(--party-cyan);
  --primary-on: #02122D;
  --accent-soft: #08313F;
}
[lang="ru"].ctx-product, .ctx-product [lang="ru"]{
  --accent: #10708C;             /* cyan darkened to pass contrast on white */
  --accent-fill: var(--party-cyan);
  --accent-soft: #DDF2F8;
}

/* ================= TYPE ================= */
:root{
  --font-display: "Heebo", "Noto Sans Hebrew", sans-serif;         /* 900 only */
  --font-ui:      "Assistant", "Noto Sans Hebrew", system-ui, sans-serif;
  --font-latin:   "Archivo", "Assistant", system-ui, sans-serif;   /* EN / FR */
  --font-print:   "Frank Ruhl Libre", Georgia, serif;              /* letterhead and PDFs ONLY */

  --t-12:12px; --t-13:13px; --t-15:15px; --t-17:17px;
  --t-20:20px; --t-26:26px; --t-34:34px; --t-44:44px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --radius:3px; --radius-lg:6px;
}

html{ direction: rtl; }
body{
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-15);
  line-height: 1.55;
}
h1,h2,h3{ font-family: var(--font-display); font-weight: 900; letter-spacing: -.015em; text-wrap: balance; }
[lang="en"], [lang="fr"]{ font-family: var(--font-latin); direction: ltr; }
[lang="ru"]{ font-family: "Noto Sans Hebrew", var(--font-latin); direction: ltr; }

.num, td.num, .id { font-variant-numeric: tabular-nums; }
[dir="ltr"], bdi.ltr { direction: ltr; unicode-bidi: isolate; }
.user-text { unicode-bidi: plaintext; }

/* ================= THE THREE PERMANENT DEVICES ================= */
/* Decision 7. Everything else in the published graphics is campaign-only
   and must not be built into the platform. */

/* 1 — gold chevron bullet */
.chev{ list-style: none; padding-inline-start: 0; }
.chev > li{ position: relative; padding-inline-start: 26px; margin-block-end: var(--s-3); }
.chev > li::before{
  content: "❯";
  position: absolute; inset-inline-start: 0; top: 0;
  color: var(--accent); font-weight: 900;
  transform: scaleX(-1);            /* points into the text in RTL */
}
[dir="ltr"] .chev > li::before{ transform: none; }

/* 2 — Star of David watermark. Dark surfaces only; never on light. */
.watermark{ position: relative; isolation: isolate; }
.watermark::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--wm-src) no-repeat;
  background-size: 62%;
  background-position: inset-inline-start -8% center;
  opacity: .06;
}

/* 3 — halftone dot texture. Dark surfaces only, at this opacity or lower. */
.halftone{ position: relative; isolation: isolate; }
.halftone::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(currentColor .8px, transparent .9px);
  background-size: 7px 7px;
  opacity: .05;
}