/*
  Design tokens. The names match the code syntax of the variables in the Figma file
  (Primitives, Color, Spacing, Radius), so design and code stay in sync.
*/
:root{
  /* primitives */
  --ink-950:#0C0C0C; --ink-900:#151515; --ink-800:#1F1F1F; --ink-700:#2B2B2B;
  --cream-50:#FBFAF6; --cream-100:#EFECE4; --cream-200:#E6E2D8; --white:#FFFFFF;
  --red-500:#E5251B; --red-600:#C91F16; --red-400:#F0554B;
  --grey-500:#8A877F;
  --green-500:#2FBF71; --amber-500:#F5A524; --blue-500:#4DA3FF; --coral-500:#FF6B5E;

  /* semantic: dark (default) */
  --bg:#0C0C0C; --bg-2:#151515; --bg-3:#1F1F1F; --bg-inverse:#EFECE4;
  --ink:#EFECE4; --mute:rgba(239,236,228,.6); --ink-inverse:#0C0C0C; --on-red:#FFFFFF;
  --line:rgba(239,236,228,.15); --line-strong:rgba(239,236,228,.4);
  --red:#E5251B; --red-hover:#C91F16;
  --success:#2FBF71; --warning:#F5A524; --error:#FF6B5E; --info:#4DA3FF;

  /* spacing */
  --space-2xs:.25rem; --space-xs:.5rem; --space-sm:.75rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem;
  /* radius */
  --radius-sm:10px; --radius-md:18px; --radius-lg:26px; --radius-xl:36px; --radius-2xl:44px; --radius-full:999px;

  /* type */
  --f-display:"Anton","Impact","Arial Narrow",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --f-serif:"Instrument Serif","Times New Roman",serif;

  --pad:4vw;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#EFECE4; --bg-2:#E6E2D8; --bg-3:#FBFAF6; --bg-inverse:#0C0C0C;
  --ink:#0C0C0C; --mute:rgba(18,18,18,.6); --ink-inverse:#EFECE4;
  --line:rgba(18,18,18,.15); --line-strong:rgba(18,18,18,.4);
  color-scheme:light;
}
/* The Tools section is always the opposite of the page */
.tools{--bg:#EFECE4; --bg-2:#FBFAF6; --ink:#0C0C0C; --mute:rgba(18,18,18,.6); --line:rgba(18,18,18,.15)}
:root[data-theme="light"] .tools{--bg:#0C0C0C; --bg-2:#161616; --ink:#EFECE4; --mute:rgba(239,236,228,.6); --line:rgba(239,236,228,.15)}