/* ============================================================
   פשוט לעשות עם AI — design tokens (SSOT)
   Direction: "נייר משבצות" (graph paper), chosen 16.09.2026.
   Every page, slide and render imports this file. Change a value here, never inline.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans+Hebrew:wght@400;500;600;700&family=Karantina:wght@400;700&display=swap");

:root {
  /* ---- paper ---- */
  --sd-paper: #F5F8F9;        /* page background */
  --sd-sheet: #FBFDFD;        /* slide / card sheet */
  --sd-grid: #E6EDF0;         /* graph-paper lines */
  --sd-wash: #CBE9F2;         /* soft blue glow, bottom-left corner */

  /* ---- ink ---- */
  --sd-head: #373C40;         /* big headlines + big numbers: very dark grey, never pure black */
  --sd-ink: #2E3236;          /* body text */
  --sd-ink-2: #5E676D;        /* kicker, secondary text, page numbers */
  --sd-line: #CAD5D9;         /* borders, dividers */

  /* ---- accents (one per slide, max) ---- */
  --sd-mark: #FFE45C;         /* highlighter behind the key word */
  --sd-done: #2F7D5B;         /* success / completed step */
  --sd-done-bg: #E1F1E9;

  /* ---- type ---- */
  --sd-display: "Karantina", "IBM Plex Sans Hebrew", "Arial Hebrew", sans-serif;
  --sd-body: "IBM Plex Sans Hebrew", "Arial Hebrew", "Segoe UI", sans-serif;
  --sd-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ---- grid cell (screen pages) ---- */
  --sd-cell: 32px;
}

/* ---------- components ---------- */

/* graph paper surface; on slides use cqw-based sizes (see BRAND.md) */
.sd-paper {
  background-color: var(--sd-sheet);
  background-image:
    radial-gradient(60rem 30rem at 0% 100%, rgba(203, 233, 242, .85), transparent 70%),
    linear-gradient(var(--sd-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sd-grid) 1px, transparent 1px);
  background-size: auto, var(--sd-cell) var(--sd-cell), var(--sd-cell) var(--sd-cell);
}

/* highlighter: sits behind the lower 50% of the word */
.sd-hl {
  background: linear-gradient(transparent 38%, var(--sd-mark) 38%, var(--sd-mark) 88%, transparent 88%);
  color: inherit;
  padding-inline: .08em;
}

/* the promise that was broken */
.sd-strike { text-decoration: line-through; text-decoration-thickness: .08em; color: var(--sd-ink-2); }

/* numbers inside Hebrew text: always isolate, or "1.2%" flips */
.sd-num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* brand bracket: [פשוט לעשות] */
.sd-br { position: relative; display: inline-block; padding-inline: .32em; }
.sd-br::before, .sd-br::after {
  content: ""; position: absolute; top: .06em; bottom: .02em; width: .2em;
  border: .07em solid currentColor;
}
.sd-br::before { right: 0; border-left: 0; }
.sd-br::after { left: 0; border-right: 0; }

.sd-display { font-family: var(--sd-display); font-weight: 700; color: var(--sd-head); line-height: .92; }