/* PulsarERP design tokens — the one place for type, colour, space and radius.
   Pages use these variables only; a literal colour or font size in a page stylesheet is a defect.
   Two themes: warm light (default, Shimon 2026-10-23) and dark, chosen by <html data-theme="light|dark">. */

:root {
  /* ---- Families: type system "C" ---- */
  --font-display: "Noto Serif Hebrew", "Instrument Serif", serif;
  --font-latin: "Instrument Serif", "Noto Serif Hebrew", serif;
  --font-text: "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Type scale: 8 steps, fluid between 390px and 1440px ---- */
  --fs-label: 0.75rem;                                        /* 12 — mono labels */
  --fs-small: 0.875rem;                                       /* 14 — notes, chips */
  --fs-body: 1rem;                                            /* 16 — text, menu, buttons */
  --fs-eyebrow: 0.9375rem;                                    /* 15 — the mono line above a title */
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.36vw, 1.25rem);     /* 17 → 20 — intro paragraph */
  --fs-answer: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);      /* 20 → 26 — answer sentence */
  --fs-figure: clamp(3rem, 2.3rem + 2.9vw, 4.75rem);          /* 48 → 76 — large figures */
  --fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);             /* 32 → 52 — section headings */
  --fs-title: clamp(2.375rem, 1.6rem + 3vw, 4.25rem);         /* 38 → 68 — the title of an inner page */
  --fs-display: clamp(2.5rem, 1.38rem + 4.6vw, 5.5rem);       /* 40 → 88 — the headline */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-text: 1.65;

  /* Latin words inside Hebrew serif lines. Instrument Serif's x-height is 0.51em and its
     capitals 0.72em; Noto Serif Hebrew's letters stand 0.65em. At 1.12em the Latin lower case
     reaches 0.57em and the capitals 0.81em, so the word reads level with the Hebrew around it. */
  --latin-scale: 1.12em;

  /* ---- Space: 4px base ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --gutter: clamp(1rem, 0.4rem + 2.4vw, 3.5rem);
  --section-gap: clamp(4.5rem, 2.6rem + 7.8vw, 9.5rem);      /* 72 → 152 — between page sections */
  --measure: 40rem;
  --page-max: 78rem;

  /* ---- Radius ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-slow: 900ms;
}

/* ---- Dark: green-black, mint accent, the demo card as cream paper ----
   .tone-dark takes the same set inside either theme (the permissions band). */
:root[data-theme="dark"],
.tone-dark {
  color-scheme: dark;
  --bg: #0f1513;
  --surface: #16201c;
  --ink: #f4f2ec;
  --ink-2: #c9cfcc;
  --muted: #9aa3a0;
  --line: #26302c;
  --line-strong: #3a4642;
  --accent: #b6e3cc;
  --accent-ink: #0f1513;
  --focus: #b6e3cc;

  --paper: #f7f5ef;
  --paper-ink: #16201c;
  --paper-muted: #5a6560;
  --paper-line: #dad6cb;
  --paper-chip: #e7ece6;
  --paper-accent: #2b7054;
  --paper-warn: #9e4925;
  --paper-track: #e4e1d7;
  --paper-shadow: 0 30px 80px -40px rgb(0 0 0 / 0.7);

  --paper-2: #efece4;
  --paper-bubble: #e8e4d9;
  --ok: #2b7054;

  --contour: #22302b;
  --glow: rgb(182 227 204 / 0.16);
  --grid-dot: rgb(244 242 236 / 0.14);
  --grid-line: rgb(244 242 236 / 0.06);
  --net-line: rgb(244 242 236 / 0.13);
  --net-node: rgb(244 242 236 / 0.35);
  --wave: rgb(244 242 236 / 0.22);
  --spot: rgb(182 227 204 / 0.14);

  /* Breathing background (living-bg.js): kept a breath away from the page colour. */
  --live-clear: rgb(15 21 19 / 0);
  --live-dots: rgb(182 227 204 / 0.08);
  --live-grain-a: rgb(182 227 204 / 0.08);
  --live-grain-b: rgb(244 242 236 / 0.05);
  --live-terrace: rgb(244 242 236 / 0.05);
}

/* ---- Warm light (default): ivory, coral accent, the demo card as white paper ---- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f4ec;
  --surface: #efeadf;
  --ink: #1b1b18;
  --ink-2: #4a4a44;
  --muted: #6b6a62;
  --line: #e2ddcf;
  --line-strong: #cfc9b8;
  --accent: #c8401a;
  --accent-ink: #ffffff;
  --focus: #c8401a;

  --paper: #ffffff;
  --paper-ink: #1b1b18;
  --paper-muted: #6b6a62;
  --paper-line: #ebe6da;
  --paper-chip: #f3efe5;
  --paper-accent: #b83b18;
  --paper-warn: #b83b18;     /* "stopped", "short", "hidden": never the same colour as "new" or "read" */
  --paper-track: #efeadf;
  --paper-shadow: 0 1px 0 #e2ddcf, 0 24px 60px -34px rgb(60 40 20 / 0.28);

  /* Background: dotted map lines one shade off the page, and a warm glow under the demo card. */
  --paper-2: #faf8f3;
  --paper-bubble: #f1ede4;
  --ok: #2b7054;

  --contour: #e0d6c2;
  --glow: rgb(214 92 48 / 0.30);
  --grid-dot: rgb(27 27 24 / 0.16);
  --grid-line: rgb(27 27 24 / 0.05);
  --net-line: rgb(27 27 24 / 0.12);
  --net-node: rgb(27 27 24 / 0.32);
  --wave: rgb(27 27 24 / 0.32);
  --spot: rgb(200 64 26 / 0.10);

  /* Breathing background (living-bg.js): kept a breath away from the page colour. */
  --live-clear: rgb(247 244 236 / 0);
  --live-dots: rgb(196 120 80 / 0.11);
  --live-grain-a: rgb(214 92 48 / 0.14);
  --live-grain-b: rgb(236 210 172 / 0.6);
  --live-terrace: rgb(150 110 70 / 0.08);
}

/* A dark band on the light page keeps the page's coral, lightened to read on green-black. */
:root:not([data-theme="dark"]) .tone-dark {
  --accent: #f19a78;
  --focus: #f19a78;
  --paper-accent: #b83b18;
  --paper-warn: #b83b18;
}