/* Space, size, shape, elevation. 4/8 grid at Scale 1.0, multiplied by --scale. */
:root,[data-scale]{
  --space-0:0;
  --space-1:calc(4px * var(--scale));
  --space-2:calc(8px * var(--scale));
  --space-3:calc(12px * var(--scale));
  --space-4:calc(16px * var(--scale));
  --space-5:calc(20px * var(--scale));
  --space-6:calc(24px * var(--scale));
  --space-8:calc(32px * var(--scale));
  --space-10:calc(40px * var(--scale));
  --space-12:calc(48px * var(--scale));
  --space-16:calc(64px * var(--scale));
  --space-20:calc(80px * var(--scale));
  --target-student:calc(48px * var(--scale));
  --control-sm:calc(36px * var(--scale));
  --control-md:calc(44px * var(--scale));
  --control-lg:calc(52px * var(--scale));
  --control-xl:calc(60px * var(--scale));
  --icon-sm:calc(16px * var(--scale));
  --icon-md:calc(20px * var(--scale));
  --icon-lg:calc(24px * var(--scale));
}
:root{
  --target-adult:44px;
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-pill:999px;
  --border-width-hairline:1px;
  --border-width-control:1.5px;
  --border-width-selected:2px;
  --focus-ring-width:3px;
  --focus-ring-gap:2px;
  --shadow-overlay:0 12px 32px rgba(15,20,30,0.14),0 2px 6px rgba(15,20,30,0.08);
  --width-reading:68ch;
  --width-page:760px;
  --width-margin:360px;
  --width-margin-compact:300px;
  --width-rail:248px;
  --width-rail-collapsed:72px;
  --height-top-bar:64px;
  --height-action-bar:80px;
  --breakpoint-phone:430px;
  --breakpoint-tablet:1024px;
  --breakpoint-desktop:1366px;
  --breakpoint-wide:1440px;
}