/* ==========================================================================
   MediLab design tokens. The single source of truth for colour, type,
   spacing, radius, elevation and motion. Every other stylesheet, template
   and script reads these variables; none of them hard-codes a value.

   Rules enforced here (from the interface spec):
   - 4pt grid: every spacing token is a multiple of 4px.
   - One sans-serif family for the whole interface.
   - Semantic colour: blue = action/trust, green = success, yellow = warning,
     red = danger. No other hue carries meaning.
   - Depth: light mode uses soft multi-layer shadows with a top highlight;
     dark mode uses surface lightness steps and 10-15% white borders only.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- type ------------------------------------------------------------ */
  --ml-font: 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* The book's handwriting voice, for learning content only: terms, the
     teacher's boxes, flash-card fronts, the sample answer and the deep
     explanation. Navigation, buttons, forms and running text stay in the
     site face. If the script face fails to load, the site face stands in. */
  --ml-font-voice: "Playpen Sans Hebrew", var(--ml-font);

  --ml-fs-1: 12px;   /* captions, badges, fine print */
  --ml-fs-2: 14px;   /* secondary text, compact controls */
  --ml-fs-3: 16px;   /* body, buttons, inputs */
  --ml-fs-4: 20px;   /* card titles */
  --ml-fs-5: 24px;   /* section titles; the dashboard ceiling */
  --ml-fs-6: 32px;   /* landing section titles, phone hero */
  --ml-fs-7: 40px;   /* landing hero */
  --ml-fs-section: 24px;   /* landing section titles: 24 on phones, 32 from 720px */
  --ml-fs-hero: 32px;      /* landing hero: 32 on phones, 40 from 720px */

  --ml-lh-display: 1.15;
  --ml-lh-title: 1.3;
  --ml-lh-ui: 1.4;
  --ml-lh-body: 1.6;

  --ml-ls-display: -0.025em;
  --ml-ls-title: -0.01em;
  --ml-ls-label: 0.05em;

  --ml-fw-regular: 400;
  --ml-fw-medium: 600;
  --ml-fw-bold: 700;
  --ml-fw-heavy: 800;

  /* ---- spacing: 4pt grid ------------------------------------------------ */
  --ml-sp-0: 0;
  --ml-sp-1: 4px;
  --ml-sp-2: 8px;
  --ml-sp-3: 12px;
  --ml-sp-4: 16px;
  --ml-sp-5: 20px;
  --ml-sp-6: 24px;
  --ml-sp-8: 32px;
  --ml-sp-10: 40px;
  --ml-sp-12: 48px;
  --ml-sp-14: 56px;
  --ml-sp-16: 64px;
  --ml-sp-20: 80px;
  --ml-sp-24: 96px;

  /* one alignment axis per container */
  --ml-gutter: 16px;
  --ml-container: 1152px;
  --ml-reading: 720px;

  /* ---- radius ----------------------------------------------------------- */
  --ml-r-xs: 4px;
  --ml-r-sm: 8px;
  --ml-r-md: 12px;
  --ml-r-lg: 16px;
  --ml-r-xl: 24px;
  --ml-r-full: 999px;

  /* ---- sizing ----------------------------------------------------------- */
  --ml-tap: 44px;          /* minimum touch target */
  --ml-control-sm: 36px;   /* visual height; the hit area still reaches 44px */
  --ml-control: 44px;
  --ml-control-lg: 52px;
  --ml-header-h: 64px;
  --ml-tabbar-h: 64px;

  /* ---- colour: light --------------------------------------------------- */
  --ml-bg: #F5F7F9;
  --ml-surface: #FFFFFF;
  --ml-surface-2: #FFFFFF;
  --ml-surface-3: #FFFFFF;
  --ml-sunken: #EDF0F4;
  --ml-sunken-2: #E3E7EC;

  --ml-ink: #161F2A;       /* headings */
  --ml-text: #37414D;      /* body: a step softer than headings */
  --ml-muted: #5C646F;     /* secondary text, 5.6:1 on the page */
  --ml-subtle: #6B7280;    /* meta text, placeholders: 4.8:1 on white */

  --ml-line: rgb(22 31 42 / 0.08);        /* dividers: 8% */
  --ml-line-strong: rgb(22 31 42 / 0.14); /* field outlines */
  --ml-tint: rgb(22 31 42 / 0.05);
  --ml-tint-2: rgb(22 31 42 / 0.09);

  --ml-accent: #2E6FBE;          /* blue: action and trust */
  --ml-accent-hover: #1F5FA9;
  --ml-accent-press: #144F92;
  --ml-accent-text: #2463AE;
  --ml-accent-soft: #EAF3FE;
  --ml-accent-soft-2: #D3E7FF;
  --ml-accent-line: rgb(46 111 190 / 0.35);
  --ml-on-accent: #FFFFFF;
  --ml-on-accent-muted: rgb(255 255 255 / 0.92);
  --ml-on-accent-tint: rgb(255 255 255 / 0.18);

  --ml-success: #1D7D3E;
  --ml-success-soft: #E6FAE9;
  --ml-warning: #EFBD24;
  --ml-warning-text: #7E4F04;
  --ml-warning-soft: #FFF7D9;
  --ml-danger: #C52B30;
  --ml-danger-soft: #FFEEEE;

  --ml-inverse: #1A2532;         /* a dark block inside a light page */
  --ml-on-inverse: #FFFFFF;
  --ml-on-inverse-muted: rgb(255 255 255 / 0.72);

  --ml-glass: rgb(255 255 255 / 0.78);    /* translucent bars over content */
  --ml-scrim: rgb(9 14 20 / 0.48);         /* behind sheets and dialogs */
  --ml-media-scrim: linear-gradient(180deg, rgb(9 14 20 / 0) 0%, rgb(9 14 20 / 0.18) 40%, rgb(9 14 20 / 0.72) 100%);

  /* brand wordmark, as printed */
  --ml-brand-blue: #2E6FBE;
  --ml-brand-green: #3FA54B;
  --ml-brand-ink: #161F2A;

  /* ---- elevation: light (top highlight + diffused low-opacity drop) ---- */
  --ml-elev-0: none;
  --ml-elev-1: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(22 31 42 / 0.05), 0 4px 16px rgb(22 31 42 / 0.05);
  --ml-elev-2: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 2px 4px rgb(22 31 42 / 0.05), 0 12px 32px rgb(22 31 42 / 0.08);
  --ml-elev-3: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 4px 8px rgb(22 31 42 / 0.06), 0 24px 56px rgb(22 31 42 / 0.12);
  --ml-elev-accent: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(20 79 146 / 0.14), 0 4px 12px rgb(20 79 146 / 0.12);
  --ml-sunken-shadow: inset 0 1px 2px rgb(22 31 42 / 0.08), inset 0 -1px 0 rgb(255 255 255 / 0.7);
  --ml-ring-line: inset 0 0 0 1px var(--ml-line);
  --ml-ring-accent: inset 0 0 0 2px var(--ml-accent);
  --ml-focus-ring: 0 0 0 3px var(--ml-surface), 0 0 0 5px var(--ml-accent);

  /* ---- motion ------------------------------------------------------------ */
  --ml-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ml-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ml-dur-1: 120ms;
  --ml-dur-2: 200ms;
  --ml-dur-3: 320ms;

  /* ---- layers ------------------------------------------------------------- */
  --ml-z-header: 40;
  --ml-z-tabbar: 60;
  --ml-z-dropdown: 80;
  --ml-z-sheet: 1000;
  --ml-z-menu: 1050;
  --ml-z-toast: 1100;
  --ml-z-coach: 1200;
}

/* ---- colour: dark (depth from surface lightness, never from shadow) ---- */
html[data-ml-theme="dark"] {
  color-scheme: dark;
  --ml-bg: #111418;          /* L* 6 */
  --ml-surface: #202328;     /* L* 14 */
  --ml-surface-2: #2E3237;   /* L* 21 */
  --ml-surface-3: #3E4146;   /* L* 27 */
  --ml-sunken: #0B0F13;
  --ml-sunken-2: #161A1E;

  --ml-ink: #EFF2F5;
  --ml-text: #D1D5D9;
  --ml-muted: #A0A5AC;
  --ml-subtle: #949AA1;

  --ml-line: rgb(255 255 255 / 0.10);
  --ml-line-strong: rgb(255 255 255 / 0.15);
  --ml-tint: rgb(255 255 255 / 0.05);
  --ml-tint-2: rgb(255 255 255 / 0.09);

  --ml-accent: #2E6FBE;
  --ml-accent-hover: #3D7ECE;
  --ml-accent-press: #2863AB;
  --ml-accent-text: #81B4F6;
  --ml-accent-soft: #1C2633;     /* desaturated chip fill */
  --ml-accent-soft-2: #223144;
  --ml-accent-line: rgb(129 180 246 / 0.35);

  --ml-success: #7CCD8E;
  --ml-success-soft: #1E3022;
  --ml-warning: #F4C855;
  --ml-warning-text: #EFCD79;
  --ml-warning-soft: #352D19;
  --ml-danger: #F07F77;
  --ml-danger-soft: #402625;
  /* the same hues one step below the card surface: notes inside a card */
  --ml-well-accent: #141B24;
  --ml-well-warning: #211C10;
  --ml-well-danger: #26181A;
  --ml-well-success: #13201A;

  --ml-inverse: #2E3237;         /* dark blocks lift above the page, like any card */
  --ml-on-inverse: #EFF2F5;
  --ml-on-inverse-muted: rgb(239 242 245 / 0.72);

  --ml-glass: rgb(32 35 40 / 0.78);
  --ml-scrim: rgb(0 0 0 / 0.56);

  --ml-brand-blue: #81B4F6;
  --ml-brand-green: #7CCD8E;
  --ml-brand-ink: #EFF2F5;

  /* no drop shadows: a lighter surface, a top highlight and a 10-15% border */
  --ml-elev-1: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 0 1px rgb(255 255 255 / 0.10);
  --ml-elev-2: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(255 255 255 / 0.12);
  --ml-elev-3: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.15);
  --ml-elev-accent: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 0 1px rgb(255 255 255 / 0.10);
  --ml-sunken-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), inset 0 -1px 0 rgb(255 255 255 / 0.04);
}

@media (min-width: 720px) {
  :root { --ml-gutter: 24px; --ml-fs-section: 32px; --ml-fs-hero: 40px; }
}

/* ---- legacy names -----------------------------------------------------------
   Older stylesheets and scripts still read these. They are aliases now, so the
   whole site answers to one palette. */
:root, html[data-ml-theme="dark"] {
  --ml-card: var(--ml-surface);
  --ml-page: var(--ml-bg);
  --ml-mut: var(--ml-muted);
  --ml-acc: var(--ml-accent-text);
  --ml-a1: var(--ml-accent);
  --ml-a2: var(--ml-accent);
  --ml-grad: var(--ml-accent);
}

/* Inverse surfaces: dark panels inside the light theme (and their twins in
   the dark theme) re-map the text and line tokens, so any token-coloured
   text placed on them reads on the dark ground. */
.ml-inverse, .ml-fb,
[style*="background:var(--ml-inverse)"], [style*="background: var(--ml-inverse)"],
[style*="background-color:var(--ml-inverse)"], [style*="background-color: var(--ml-inverse)"] {
  --ml-ink: #EFF2F5;
  --ml-text: #D1D5D9;
  --ml-muted: #A0A5AC;
  --ml-subtle: #949AA1;
  --ml-line: rgb(255 255 255 / 0.10);
  --ml-line-strong: rgb(255 255 255 / 0.15);
  --ml-tint: rgb(255 255 255 / 0.05);
  --ml-tint-2: rgb(255 255 255 / 0.09);
  --ml-sunken: rgb(0 0 0 / 0.24);
  --ml-accent-text: #81B4F6;
  --ml-accent-soft: #1C2633;
  --ml-accent-soft-2: #223144;
  --ml-success: #7CCD8E;
  --ml-danger: #F07F77;
  --ml-warning-text: #EFCD79;
  color: var(--ml-on-inverse);
}

/* Elevation on filled surfaces. The light elevations carry a bright top
   highlight: on a white surface it is felt, not seen, but on an accent or
   inverse fill it draws a hard white line along the top edge. A filled
   surface takes a highlight of the fill's own strength over the same soft
   drops. The dark theme's elevations are built for dark fills already. */
html:not([data-ml-theme="dark"]) :is(
  [style*="background:var(--ml-accent)"], [style*="background: var(--ml-accent)"],
  [style*="background-color:var(--ml-accent)"], [style*="background-color: var(--ml-accent)"],
  .lbl-badge) {
  --ml-elev-1: var(--ml-elev-accent);
  --ml-elev-2: var(--ml-elev-accent);
  --ml-elev-3: var(--ml-elev-accent);
}
html:not([data-ml-theme="dark"]) :is(.ml-inverse, .ml-fb, .ml-mapwrap,
  [style*="background:var(--ml-inverse)"], [style*="background: var(--ml-inverse)"],
  [style*="background-color:var(--ml-inverse)"], [style*="background-color: var(--ml-inverse)"]) {
  --ml-elev-1: inset 0 1px 0 rgb(255 255 255 / 0.10), 0 1px 2px rgb(22 31 42 / 0.05), 0 4px 16px rgb(22 31 42 / 0.05);
  --ml-elev-2: inset 0 1px 0 rgb(255 255 255 / 0.10), 0 2px 4px rgb(22 31 42 / 0.05), 0 12px 32px rgb(22 31 42 / 0.08);
  --ml-elev-3: inset 0 1px 0 rgb(255 255 255 / 0.10), 0 4px 8px rgb(22 31 42 / 0.06), 0 24px 56px rgb(22 31 42 / 0.12);
}

/* Landing pages (home for visitors, pricing, shop, about) use six sizes:
   the smallest step becomes 14px there. The member home is a dashboard:
   nothing on it is set larger than 24px. */
html:is([data-ml-page="home"], [data-ml-page="pricing"], [data-ml-page="shop"], [data-ml-page="about"]) { --ml-fs-1: 14px; }
html[data-ml-page="home"][data-ml-auth="member"], html[data-ml-page="personal"] {
  --ml-fs-6: 24px; --ml-fs-7: 24px; --ml-fs-section: 24px; --ml-fs-hero: 24px;
}

/* 1.6.2 (p180): pictures inside lesson text. Width by the picture's shape, one height cap for all. */
:root {
  --ml-fig-w-wide: 720px;
  --ml-fig-w-land: 600px;
  --ml-fig-w-square: 460px;
  --ml-fig-w-tall: 360px;
  --ml-fig-h: min(480px, 58vh);
}
@media (max-width: 620px) {
  :root { --ml-fig-w-wide: 100%; --ml-fig-w-land: 100%; --ml-fig-w-square: 100%; --ml-fig-w-tall: 100%; --ml-fig-h: min(460px, 56vh); }
}