/* Illouz platform — design tokens.
   Brand decided by Dan, September 2026 (see the illouz-brand skill). Import once; never hardcode a colour or font 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, video frame and hero panel.
   The palette is the same in both. What changes is which colour is the ground. */

:root{
  /* ---- brand constants. Identical in every context. ---- */
  --navy:      #07134A;   /* the ground and the home */
  --navy-raised: #0C1B5C;
  --navy-line: #22306B;
  --turq:      #22C2EB;   /* the identity accent: exactly one emphasis per surface */
  --turq-deep: #0F7FA0;   /* turquoise that has to be read as text on white */
  --yellow:    #F9C823;   /* action only: buttons and CTAs. Never headlines, captions, backgrounds */
  --white:     #FFFFFF;
}

/* ================= PRODUCT — light ================= */
.ctx-product{
  --ground:       #FFFFFF;
  --surface:      #FFFFFF;
  --surface-sunk: #F3F5F9;
  --rule:         #DCE1EA;
  --rule-strong:  #C3CBD8;

  --ink:          #07134A;
  --ink-mid:      #3A4770;
  --ink-muted:    #6B7797;

  --accent:       #0F7FA0;   /* turquoise darkened to pass contrast as text on white */
  --accent-fill:  #22C2EB;   /* the real turquoise, as a bar, band or highlight behind navy text */
  --accent-soft:  #DFF5FB;

  --action:       #F9C823;   /* button fill */
  --action-on:    #07134A;   /* button text */
  --primary:      #07134A;
  --primary-on:   #FFFFFF;

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

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

/* ================= SOCIAL — dark ================= */
.ctx-social{
  --ground:       #07134A;
  --surface:      #0C1B5C;
  --surface-sunk: #050E38;
  --rule:         #22306B;
  --rule-strong:  #34468C;

  --ink:          #FFFFFF;
  --ink-mid:      #C4CCE6;
  --ink-muted:    #8C98C4;

  --accent:       #22C2EB;   /* full turquoise on navy */
  --accent-fill:  #22C2EB;
  --accent-soft:  #0E2A66;

  --action:       #F9C823;
  --action-on:    #07134A;
  --primary:      #FFFFFF;
  --primary-on:   #07134A;

  --ok:   #4ADE80;  --ok-soft:   #08301D;
  --warn: #F5B84A;  --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;
}

/* ================= TYPE ================= */
:root{
  --font-he: "Noto Sans Hebrew", system-ui, sans-serif;   /* Hebrew, all weights */
  --font-la: "Inter", system-ui, sans-serif;              /* English, French, Russian */

  --t-12:12px; --t-13:13px; --t-15:15px; --t-17:17px;
  --t-20:20px; --t-26:26px; --t-34:34px; --t-44:44px;
  --t-56:56px; --t-72:72px;                                /* display only */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --radius:6px; --radius-lg:8px;
}

html{ direction: rtl; }
body{
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-he);
  font-size: var(--t-17);
  line-height: 1.55;
}
h1,h2,h3{ font-weight: 900; letter-spacing: -.01em; text-wrap: balance; line-height: 1.1; }
[lang="en"], [lang="fr"], [lang="ru"]{ font-family: var(--font-la); direction: ltr; }
[lang="en"] .btn, [lang="fr"] .btn{ text-transform: uppercase; letter-spacing: .08em; }

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

/* ================= THE ONE EMPHASIS ================= */
/* Exactly one per surface: one to three words of the headline, the promise or the verb. Never the name. */
em.hl, .hl em { font-style: normal; color: var(--accent); }

/* ================= BUTTON ================= */
.btn{
  display:inline-block; background: var(--action); color: var(--action-on);
  font-weight: 900; font-size: var(--t-15); padding: 13px 24px; border: 0; border-radius: var(--radius);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }

/* ================= LOGO ================= */
/* Set height OR width, never both. object-fit keeps the proportions on every screen. */
.logo{ display:block; height: 40px; width: auto; max-width: 100%; object-fit: contain; object-position: inline-start center; }
.logo-line{ font-weight: 700; font-size: var(--t-12); letter-spacing: .1em; color: var(--accent); margin-block-start: var(--s-2); }
.ctx-product .logo-line{ color: var(--ink); }

/* ================= BANDS ================= */
.band{ padding-block: var(--s-8); }
@media (max-width: 767px){ .band{ padding-block: var(--s-6); } }
.band-navy{ background: var(--navy); color: #fff; border-block-start: 8px solid var(--turq); }