/* ============================================================
   Maagal Design System — combined tokens
   Deployed source of truth. Edit token values here and verify both themes.
   ============================================================ */

/* ---------- fonts.css ---------- */
/* Maagal webfonts are self-hosted, generated by `npm run build:assets`, and
   committed with the static deployment. Inter is the compact product-interface
   face; Heebo remains the Hebrew-learning face; Assistant remains available to
   unmigrated pages until the rollout is complete. */

@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('../assets/fonts/inter-latin.woff2?v=20260814-9') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Assistant Variable';font-style:normal;font-display:swap;font-weight:200 800;src:url('../assets/fonts/assistant-latin.woff2?v=20260814-9') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Assistant Variable';font-style:normal;font-display:swap;font-weight:200 800;src:url('../assets/fonts/assistant-hebrew.woff2?v=20260814-9') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Heebo Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('../assets/fonts/heebo-latin.woff2?v=20260814-9') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Heebo Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('../assets/fonts/heebo-hebrew.woff2?v=20260814-9') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}

:root{
  --font-interface:'Inter Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Heebo Variable','Assistant Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Assistant Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Hebrew runs get their own token so the learning surfaces can never drift
     apart from each other. Heebo, because it is the face the practice tools
     already chose deliberately for every Hebrew run, and because its terminals
     separate the lookalike pairs the Level 0 shelf drills — ב/כ, ד/ר, ה/ח, ו/ז.
     Latin chrome stays on --font-body; this is for Hebrew text only. */
  --font-hebrew:'Heebo Variable','Assistant Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- colors.css ---------- */
/* ── Maagal colour tokens ─────────────────────────────────────────────
   Base values first, semantic aliases second. Always author against the
   semantic aliases; reach for a base value only when no alias fits. */
:root{
  /* Brand — gold. The sole identity accent. */
  --color-gold:#d6a63f;
  --color-gold-active:#edcb7c;
  --color-gold-neutral:#e5c268;
  --color-gold-pale:#f6edd5;
  --color-on-gold:#0d1420;
  /* Gold reads as an accent on dark surfaces but fails as TEXT on light ones
     (#d6a63f is ~2.3:1 on white). This deeper gold carries the same hue at
     ~5.7:1 on white, for link hovers and gold-coloured text on pale surfaces. */
  --color-gold-deep:#8a5d0f;

  /* Ink & neutrals */
  --color-ink:#0d1420;
  --color-ink-deep:#1a3047;
  --color-body:#414750;
  /* Muted text carries captions, hints and timezone labels — all small type.
     The former #848b95 measured ~3.4:1 on white and ~2.9:1 on the page surface,
     below the 4.5:1 WCAG AA floor. This value clears AA on both surfaces while
     keeping the same cool-grey character. --color-mute-line preserves the old
     lighter value for the borders/rules that used to borrow this token. */
  --color-mute:#5f6670;
  --color-mute-line:#848b95;
  --color-silver:#e3e5e8;
  --color-canvas:#ffffff;
  --color-canvas-soft:#e8ebef;

  /* Semantic families */
  --color-positive:#2e9e5b;
  --color-positive-deep:#0b4a28;
  --color-warning:#f2c230;
  /* Carries badge and "seats running low" text on the pale gold surface.
     The original #a8650e measured 3.97:1 there — just under AA for the 12px
     captions it is used on. Deepened to ~5.5:1; hue is unchanged. */
  --color-warning-deep:#8a5210;
  --color-warning-content:#463c15;
  --color-negative:#cd3540;
  --color-negative-deep:#9d1f2a;
  --color-negative-darkest:#8e0a18;
  --color-negative-bg:#26070b;

  /* Tertiary illustration accents — illustration only, never UI actions. */
  --color-sand:#e7cda6;
  --color-azure:#4fb2e5;

  /* Signature gradient — the medallion's ground. Never reversed or rotated. */
  --gradient-signature:linear-gradient(160deg,#1a3047 0%,#000000 100%); /* @kind color */

  /* ── Semantic aliases ── */
  --surface-page:var(--color-canvas-soft);
  --surface-card:var(--color-canvas);
  --surface-card-mist:var(--color-canvas-soft);
  --surface-card-gold:var(--color-gold-pale);
  --surface-dark:var(--gradient-signature);
  --surface-sunken:var(--color-canvas-soft);

  --text-heading:var(--color-ink);
  --text-body:var(--color-body);
  --text-muted:var(--color-mute);
  --text-on-dark:var(--color-silver);
  --text-on-dark-accent:var(--color-gold);
  --text-on-primary:var(--color-on-gold);
  --text-link:var(--color-ink);
  --text-link-hover:var(--color-gold-deep);
  --text-link-active:var(--color-gold-deep);

  --action-primary:var(--color-gold);
  --action-primary-hover:var(--color-gold-neutral);
  --action-primary-active:var(--color-gold-active);
  --action-secondary:var(--color-canvas-soft);
  --action-secondary-hover:#dde1e6;
  --action-tertiary:var(--color-canvas);
  --action-tertiary-hover:var(--color-canvas-soft);
  --action-disabled:var(--color-canvas-soft);
  --action-disabled-text:var(--color-mute);

  --border-strong:var(--color-ink);
  --border-subtle:var(--color-canvas-soft);
  --border-medallion:var(--color-silver);
  --focus-ring:var(--color-gold);

  --status-positive-bg:var(--color-gold-pale);
  --status-positive-text:var(--color-positive-deep);
  --status-warning-bg:#fdf3d2;
  --status-warning-text:var(--color-warning-content);
  --status-negative-bg:var(--color-negative-bg);
  --status-negative-text:var(--color-canvas);

  /* Community globe — numeric RGB roles are consumed by Cobe's WebGL API. */
  --globe-stage:#07111e;
  --globe-base-rgb:205 216 231;
  --globe-marker-rgb:214 166 63;
  --globe-jerusalem-rgb:220 244 255;
  --globe-glow-rgb:79 178 229;
  --globe-glow-shadow:rgb(var(--globe-glow-rgb)/.22);
  --globe-arc-rgb:229 194 104;

  /* shadcn-style semantic surface/foreground pairs expressed in Maagal's
     palette. Components consume roles, while the brand remains unchanged. */
  --background:var(--surface-page); --foreground:var(--text-body);
  --card:var(--surface-card); --card-foreground:var(--text-heading);
  --popover:var(--surface-card); --popover-foreground:var(--text-heading);
  --primary:var(--action-primary); --primary-foreground:var(--text-on-primary);
  --secondary:var(--action-secondary); --secondary-foreground:var(--text-heading);
  --muted:var(--surface-card-mist); --muted-foreground:var(--text-muted);
  --accent:var(--surface-card-gold); --accent-foreground:var(--text-heading);
  --destructive:var(--color-negative); --destructive-foreground:var(--color-canvas);
  --input:var(--border-subtle); --ring:var(--focus-ring);
  --sidebar:var(--surface-card); --sidebar-foreground:var(--text-body);
  --sidebar-accent:var(--surface-card-gold); --sidebar-accent-foreground:var(--text-heading);
  --sidebar-border:var(--border-subtle); --sidebar-ring:var(--focus-ring);

  /* Approved compact product surfaces. These remain separate during the
     staged migration so legacy routes do not change before verification. */
  --surface-compact-page:#f4f4f5;
  --surface-compact-card:#ffffff;
  --surface-compact-muted:#fafafa;
  --text-compact:#18181b;
  --text-compact-muted:#52525b;
  --text-compact-faint:#71717a;
  --border-compact:#dedee3;
  --border-compact-strong:#c9c9d0;
  --elevation-compact-card:0 1px 2px rgba(0,0,0,.04);
}

/* ── Dark theme ───────────────────────────────────────────────────────
   Applied when <html> carries data-theme="dark". js/theme.js stamps that
   attribute before first paint, resolving the saved choice or the OS
   preference, so there is no flash of the wrong theme.

   IMPORTANT — what this block does and does not touch:
   Only the SEMANTIC layer is remapped. The base palette entries keep their
   literal meaning, because parts of the site are dark in BOTH themes (the
   footer, the .cband-dark bands, toasts) and those rely on --color-canvas
   still meaning "the light one" and --color-ink still meaning "the dark one".
   Inverting the base palette would turn that text invisible.

   The three exceptions below are deliberate: they are tokens whose job is
   "the value that stays legible on the current surface", so they must flip. */
:root[data-theme="dark"]{
  /* Surfaces — page sits lowest, cards lift off it. */
  --surface-page:#0b1119;
  --surface-card:#141d29;
  --surface-card-mist:#1a2431;
  --surface-card-gold:#2c2415;
  --surface-sunken:#080d14;

  /* Text */
  --text-heading:#f0f3f7;
  --text-body:#c5ccd6;
  --text-muted:#97a1ae;
  --text-link:#f0f3f7;
  /* Decoupled from --color-silver so the remap below cannot darken the
     text sitting on the permanently-dark footer and bands. */
  --text-on-dark:#e3e5e8;

  /* Exception 1 — "gold that is legible as text on this surface".
     On dark, that is the light gold, not the deep one. This also carries
     --text-link-hover and --text-link-active, which alias to it. */
  --color-gold-deep:var(--color-gold-active);
  /* Exception 2 — same rule for the warning amber used on badges. */
  --color-warning-deep:#e8b45c;
  /* Exception 3 — silver is a hairline colour in this theme, not a text
     colour. Every --color-silver usage in the codebase is a border except
     .avatar, which is corrected in the dark component layer of app.css. */
  --color-silver:#2c3a4a;
  --color-mute-line:#3c4a5b;

  /* Controls */
  --action-secondary:#222e3c;
  --action-secondary-hover:#2c3a4a;
  --action-tertiary:#1a2431;
  --action-tertiary-hover:#222e3c;
  --action-disabled:#1a2431;
  --action-disabled-text:#6b7583;

  /* Lines */
  --border-strong:#3c4a5b;
  --border-subtle:#24303e;
  --border-medallion:#3c4a5b;

  /* Status — backgrounds deepened, text lifted, hues preserved. */
  --status-positive-bg:#102e1d;
  --status-positive-text:#7fdca6;
  --status-warning-bg:#33280e;
  --status-warning-text:#f0cb61;
  --status-negative-bg:#3b1015;
  --status-negative-text:#ffb8bd;

  /* Shadows need more weight to register against a dark page. */
  --elevation-overlay:0 2px 8px rgba(0,0,0,.44),0 16px 40px rgba(0,0,0,.56);
  --elevation-toast:0 2px 6px rgba(0,0,0,.38),0 8px 24px rgba(0,0,0,.46);
  --scrim-overlay:rgba(0,0,0,.66);
  --orbit-hairline:1px solid rgba(227,229,232,.16);

  --surface-compact-page:#09090b;
  --surface-compact-card:#111113;
  --surface-compact-muted:#18181b;
  --text-compact:#fafafa;
  --text-compact-muted:#a1a1aa;
  --text-compact-faint:#8b8b95;
  --border-compact:#303036;
  --border-compact-strong:#45454d;
  --elevation-compact-card:0 1px 2px rgba(0,0,0,.28);
}

/* Tells the browser to render form controls, scrollbars and the like to
   match. Set on both themes so an explicit "light" choice overrides an
   OS-level dark preference. */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* ---------- typography.css ---------- */
/* ── Maagal type ladder ───────────────────────────────────────────────
   Shorthands are usable directly:  font: var(--text-display-xl);
   Sizes/weights are exposed separately for cases that need one axis. */
:root{
  --text-display-mega:800 48px/52px var(--font-display);
  --text-display-xxl:800 44px/48px var(--font-display);
  --text-display-xl:800 clamp(30px,4vw,36px)/1.12 var(--font-display);
  --text-display-lg:700 32px/38px var(--font-display);
  --text-display-md:700 clamp(24px,3vw,30px)/1.2 var(--font-display);
  --text-display-sm:650 24px/32px var(--font-body);
  --text-display-xs:650 20px/28px var(--font-body);
  --text-body-lg:400 20px/30px var(--font-body);
  --text-body-md:400 16px/24px var(--font-body);
  --text-body-md-strong:600 16px/24px var(--font-body);
  --text-body-sm:400 14px/20px var(--font-body);
  --text-body-sm-strong:600 14px/20px var(--font-body);
  --text-caption:400 12px/16px var(--font-body);
  --text-button:600 16px/24px var(--font-body);

  /* Letter-spacing companions — only these three tokens are non-zero. */
  --tracking-display-lg:-0.108px;
  --tracking-display-sm:-0.96px;
  --tracking-display-xs:-0.48px;
  --tracking-default:0;

  /* Individual axes */
  --size-display-mega:48px; --size-display-xxl:44px; --size-display-xl:36px;
  --size-display-lg:32px;   --size-display-md:30px;  --size-display-sm:24px;
  --size-display-xs:20px;   --size-body-lg:20px;     --size-body-md:16px;
  --size-body-sm:14px;       --size-caption:12px;

  --weight-black:900;
  --weight-semibold:600;
  --weight-regular:400;

  /* Deployment-faithful compact interface ladder. This is opt-in through
     `.ui-compact` while page families migrate independently. */
  --text-ui-page-title:500 clamp(21px,2.2vw,24px)/1.25 var(--font-interface);
  --text-ui-section-title:500 17px/1.35 var(--font-interface);
  --text-ui-card-title:500 14px/1.4 var(--font-interface);
  --text-ui-body:400 13px/1.5 var(--font-interface);
  --text-ui-body-strong:500 13px/1.5 var(--font-interface);
  --text-ui-supporting:400 12px/1.5 var(--font-interface);
  --text-ui-caption:400 11px/1.45 var(--font-interface);
  --text-ui-metric:500 20px/1.2 var(--font-interface);
  --text-ui-stat:500 26px/1.15 var(--font-interface);
}

/* ---------- spacing.css ---------- */
/* ── Spacing — 4px base unit ──────────────────────────────────────── */
:root{
  --space-xxs:2px;
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-2xl:32px;
  --space-3xl:48px;

  /* Semantic */
  --space-band-y:var(--space-3xl);
  --space-band-x:var(--space-xl);
  --space-card:var(--space-xl);
  --space-button-y:var(--space-md);
  --space-button-x:var(--space-xl);
  --space-input-y:var(--space-md);
  --space-input-x:var(--space-lg);
  --space-stack:var(--space-lg);

  --container-max:1200px;
  --breakpoint-tablet:768px;
  --breakpoint-desktop:1024px;
  --touch-target-min:48px;

  /* Compact desktop geometry. Coarse-pointer overrides retain the 48px target. */
  --control-height-compact:36px;
  --control-padding-x-compact:12px;
  --card-padding-compact:12px;
}

/* ---------- shape.css ---------- */
/* ── Radii, borders, elevation ─────────────────────────────────────── */
:root{
  --radius-none:0px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:10px;
  --radius-xl:12px;   /* canonical card radius */
  --radius-pill:9999px;
  --radius-full:9999px;

  --radius-control-compact:5px;
  --radius-card-compact:6px;

  --border-width-hairline:1px;
  --border-hairline:1px solid var(--border-strong);
  --border-divider:1px solid var(--border-subtle);

  /* Elevation. The brand's primary depth cue is surface contrast, not shadow —
     shadows exist only for detached overlays (modal, toast, dropdown). */
  --elevation-0:none;
  --elevation-1:var(--border-hairline);
  --elevation-overlay:0 2px 8px rgba(13,20,32,.08),0 16px 40px rgba(13,20,32,.16);
  --elevation-toast:0 2px 6px rgba(13,20,32,.06),0 8px 24px rgba(13,20,32,.12);
  --scrim-overlay:rgba(13,20,32,.55);
}

/* ---------- motion.css ---------- */
/* ── Motion ────────────────────────────────────────────────────────────
   Not specified in the source brand doc; derived to match the brand's calm,
   journal-like character. Short, eased, never bouncy. See readme.md. */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard);
  --press-scale:0.98; /* @kind other */
}

/* ---------- ornament.css ---------- */
/* ── Ornament layer ───────────────────────────────────────────────────
   An Eclectic-Bauhaus decorative vocabulary sitting on top of the core
   brand: Jerusalem-stone surfaces, arch geometry, botanical motifs, and
   orbital motion. The Bauhaus primaries are NOT new colours — they are
   roles mapped onto palette entries the brand already owns.
   Everything here is decorative. None of it may carry an action. */
:root{
  /* Jerusalem stone — warm limestone, the one warm neutral family.
     Use for full-bleed ornamental bands, never for cards or text. */
  --stone-50:#f7f3ec;
  --stone-100:#f0e9dd;
  --stone-200:#e4d9c6;
  --stone-300:#d5c6ac;
  --stone-400:#bfad8e;
  --stone-mortar:#c9bda6;
  --stone-shadow:rgba(93,77,52,.14);

  /* Botanical — illustration only, same rule as sand and azure.
     The layer is drawn as LINE ART: pastel strokes, transparent fills, and at
     most one solid accent per motif. The deep values below are reserved for
     that single accent — never for a fill. */
  --botanic-olive:#7b8757;
  --botanic-olive-deep:#4d5836;
  --botanic-palm:#3f5d4b;
  --botanic-fruit:#5a4a63;
  --botanic-bloom:var(--color-gold);
  --botanic-bloom-pale:var(--color-gold-pale);

  /* Pastel line-art strokes — the ornament layer's working palette. */
  --pastel-gold:#e8d2a2;
  --pastel-olive:#bfc9a4;
  --pastel-palm:#a3bcac;
  --pastel-fruit:#c3b6cb;
  --pastel-blue:#b6dcf2;
  --pastel-rose:#edb8bc;
  --pastel-ink:#aeb6c0;
  --pastel-stone:#d9cdb6;

  --ornament-stroke:2px; /* @kind spacing */
  --ornament-stroke-fine:1.5px; /* @kind spacing */

  /* Bauhaus roles — aliases onto existing brand colours. Used as STROKES in
     the line-art layer; the solid form is reserved for one accent shape. */
  --bauhaus-yellow:var(--color-gold);
  --bauhaus-blue:var(--color-azure);
  --bauhaus-red:var(--color-negative);
  --bauhaus-black:var(--color-ink);
  --bauhaus-paper:var(--stone-50);
  --bauhaus-yellow-line:var(--pastel-gold);
  --bauhaus-blue-line:var(--pastel-blue);
  --bauhaus-red-line:var(--pastel-rose);
  --bauhaus-black-line:var(--pastel-ink);

  /* Arch geometry — Tel Aviv eclectic arcades, and the top of every
     Bauhaus quarter-circle. Expressed as border-radius shorthands. */
  --arch-round:50% 50% 0 0 / 42% 42% 0 0; /* @kind radius */ /* semicircular head */
  --arch-segmental:50% 50% 0 0 / 12% 12% 0 0; /* @kind radius */ /* shallow arcade head */
  --arch-quarter:100% 0 0 0; /* @kind radius */ /* Bauhaus quarter circle */
  --arch-cap:9999px 9999px 0 0; /* @kind radius */ /* self-scaling semicircular cap — colonnades at any column width */
  --arch-keystone:var(--radius-sm);

  /* Orbit — the medallion's circle, set in motion. Slow enough to be
     ambient; a fast orbit reads as a loading spinner and is wrong. */
  --orbit-slow:90s;   /* @kind other */
  --orbit-base:60s;   /* @kind other */
  --orbit-fast:34s;   /* @kind other */
  --orbit-hairline:1px solid rgba(13,20,32,.14); /* @kind other */
  --orbit-hairline-dark:1px solid rgba(227,229,232,.22); /* @kind other */
  --orbit-node:8px;
}

@keyframes maagal-orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes maagal-orbit-reverse{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes maagal-counter{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes maagal-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes maagal-bloom{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

@media (prefers-reduced-motion:reduce){
  [data-maagal-motion]{animation:none!important}
}

/* ---------- base.css ---------- */
/* ── Base element defaults ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--text-body-md);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading)}
h1{font:var(--text-display-xl)}
h2{font:var(--text-display-md)}
h3{font:var(--text-display-sm);letter-spacing:var(--tracking-display-sm)}
h4{font:var(--text-display-xs);letter-spacing:var(--tracking-display-xs)}
p{margin:0}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
a:active{color:var(--text-link-active)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
::selection{background:var(--color-gold-pale);color:var(--color-ink)}
[dir="rtl"]{text-align:right}

/* ── Pointed Hebrew ────────────────────────────────────────────────────
   Niqqud hangs below the baseline and sits above it, so pointed text needs
   vertical room the unpointed ladder never budgeted for. At the 16-20px and
   1.5-1.6 line-heights used around the tools, the marks collide with the line
   above and melt into the letters they belong to — exactly the detail a
   beginner is reading for.

   Leading only. Unitless line-height resolves against the element's own font
   size, so one global rule gives every pointed run the room it needs whatever
   size it renders at. Font size is deliberately NOT set here: font-size:1.15em
   would resolve against the PARENT, which collapsed the 32px .he display line
   to 18.4px. Where pointed text is genuinely too small the base rule is raised
   instead, so unpointed text gets the benefit too.

   Scoped to the data-display hook the tools stamp on every pointed run (which
   catches the table cells and word chips, not just the three .*-he-niqqud
   classes), plus .is-pointed for pointed text outside the toggle system.

   The :root prefix is load-bearing, not decoration. Bare [data-display] is
   0,1,0 — the same specificity as .he and .x-he — and tokens.css loads before
   tools.css and study.css, so the component rule won every tie and pointed
   text kept its cramped leading. :root lifts this to 0,2,0 so it lands. */
:root [data-display="niqqud"],:root .is-pointed{line-height:1.85}