/* Design tokens of the Averythink Haoqi design system (Paper Studio + Azure).
   Generated from docs/03-haoqi/design-system/project/tokens.json; change the tokens there, then regenerate. */
:root {
  /* color */
  --paper: #f3efe7;
  --paper-raised: #e8e2d6;
  --ink: #141414;
  --ink-muted: #5e5a53;
  --production: #ff6a13;
  --on-production: var(--ink);
  --production-text: #b04000;
  --tech: #1770f9;
  --tech-text: #105fd9;
  --on-tech: #ffffff;
  --screen: var(--ink);
  --screen-text: var(--paper);
  --screen-muted: #a8a39a;
  --ray-tech: rgba(23,112,249,0.85);
  --ray-production: rgba(255,106,19,0.8);
  --ray-paper: rgba(243,239,231,0.55);
  --grid-line: rgba(20,20,20,0.1);
  --grid-line-screen: rgba(243,239,231,0.1);
  --divider: rgba(20,20,20,0.16);
  --crosshair: rgba(20,20,20,0.45);
  --crosshair-screen: rgba(243,239,231,0.5);
  --veil: rgba(20,20,20,0.6);
  --focus: var(--tech-text);
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;
  --space-11: 112px;
  /* radius */
  --radius-none: 0;
  --radius-full: 50%;
  /* layout */
  --grid-columns: 12;
  --grid-gutter: 0;
  --grid-margin: 56px;
  --grid-margin-mobile: 16px;
  --grid-line-step: 4;
  --grid-line-step-mobile: 6;
  --hud-inset: 64px;
  --hud-inset-mobile: 24px;
  --hud-top: 28px;
  --hud-bottom: 34px;
  --screen-height: 100svh;
  --breakpoint-mobile: 768px;
  --target-min: 44px;
  /* border */
  --hairline: 1px;
  --underline-thick: 2px;
  --focus-width: 2px;
  --focus-offset: 3px;
  /* gradient */
  --glow-tech: radial-gradient(55% 70% at 85% 22%, rgba(23,112,249,0.16) 0%, rgba(23,112,249,0) 65%);
  --glow-production: radial-gradient(50% 60% at 10% 92%, rgba(255,106,19,0.2) 0%, rgba(255,106,19,0) 65%);
  --glow-tech-footer: radial-gradient(60% 70% at 14% 24%, rgba(23,112,249,0.16) 0%, rgba(23,112,249,0) 65%);
  --glow-production-footer: radial-gradient(55% 65% at 88% 86%, rgba(255,106,19,0.2) 0%, rgba(255,106,19,0) 65%);
  --screen-fade: linear-gradient(180deg, #141414 0%, #141414 55%, #f3efe7 100%);
  /* type */
  --font-display: "TikTok Sans", "Prompt", sans-serif;
  --font-sans: "TikTok Sans", "Anuphan", sans-serif;
  --font-mono: "Geist Mono", "Anuphan", monospace;
  --font-hud: "Share Tech Mono", "Anuphan", monospace;
  --font-script: "Sacramento", cursive;
}