/* Botple Education — shared design tokens.
   Light/dark blocks copied verbatim from Botple Calc's own :root
   (Downloads/Botple Calc Released as Version 1.2.html) so the main
   site and Calc read as one visual family and share a theme via the
   same 'bt' localStorage key. Only two new tokens are added at the
   bottom — everything else is intentionally identical to Calc's. */
:root{
  color-scheme:light;
  --bg:#f2f2f7;--surface:#ffffff;--surface-2:#e9e9ee;--surface-3:#dcdce2;
  --border:#d8d8dd;--divider:#e5e5ea;
  --text:#1c1c1e;--text-2:#6e6e73;--text-3:#aeaeb2;
  --accent:#ff9500;--accent-tx:#ffffff;
  --danger:#ff3b30;--danger-tx:#ffffff;
  --success:#248a3d;--info:#007aff;--warn:#b25000;
  --warn-bg:rgba(178,80,0,.12);--success-bg:rgba(36,138,61,.12);--info-bg:rgba(0,122,255,.12);--accent-bg:rgba(255,149,0,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 2px 16px rgba(0,0,0,.10);
  --radius-lg:22px;--radius-md:14px;--radius-sm:10px;
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'SF Mono',ui-monospace,'Cascadia Code','Roboto Mono',monospace;

  /* New — this site's own needs, no Calc equivalent exists for either. */
  --container-max:1120px;
  --space-section:clamp(56px,9vw,108px);

  /* Motion system — one consistent easing/timing vocabulary reused by
     every transition on the site (reveals, hover/press feedback, theme
     switching), rather than each component inventing its own numbers.
     --ease-out-smooth is a slow-deceleration curve for content settling
     into place (reveals); --ease-standard is a snappier, more neutral
     curve for immediate interactive feedback (hover/press). */
  --ease-out-smooth:cubic-bezier(.16,1,.3,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-fast:150ms;
  --dur-base:220ms;
  --dur-slow:480ms;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#18181b;--surface:#1c1c1e;--surface-2:#2c2c2e;--surface-3:#3a3a3c;
  --border:#38383a;--divider:#2c2c2e;
  --text:#f5f5f7;--text-2:#98989d;--text-3:#636366;
  --accent:#ff9f0a;--accent-tx:#000000;
  --danger:#ff453a;--danger-tx:#ffffff;
  --success:#30d158;--info:#0a84ff;--warn:#ff9f0a;
  --warn-bg:rgba(255,159,10,.16);--success-bg:rgba(48,209,88,.16);--info-bg:rgba(10,132,255,.16);--accent-bg:rgba(255,159,10,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 18px rgba(0,0,0,.55);
}