/* GENERATED by tools/gen_tokens_css.py from
   tokens.json (Hyperion Design System) - do not edit. */
:root {
  --color-void-900: #0a0d0f;
  --color-void-700: #202325;
  --color-bone-100: #ecebe2;
  --color-bone-200: #deded6;
  --color-bone-300: #d4d2c9;
  --color-bone-400: #cac8bf;
  --color-key-100: #cfd1d0;
  --color-key-200: #c1c3c3;
  --color-key-300: #b6b8b9;
  --color-paper-000: #ffffff;
  --color-paper-100: #f6f5f0;
  --color-paper-200: #ecebe4;
  --color-paper-300: #dedcd2;
  --color-ink-900: #23251f;
  --color-ink-700: #4a4c44;
  --color-ink-600: #5a5c55;
  --color-ink-500: #7f8a86;
  --color-phosphor-bright: #e6efe9;
  --color-phosphor-dim: #7f8a86;
  --color-phosphor-teal: #34c4b8;
  --color-teal-400: #5fd6cb;
  --color-teal-500: #34c4b8;
  --color-teal-600: #1f9f95;
  --color-teal-700: #157a72;
  --color-teal-glow: rgba(52,196,184,0.6);
  --color-red-400: #e7a89f;
  --color-red-500: #e0533c;
  --color-red-600: #c2402d;
  --color-red-700: #9e3122;
  --color-red-glow: rgba(224,83,60,0.5);
  --color-amber-500: #e0a23c;
  --color-amber-600: #c2851f;
  --color-vfd-on: #6ff2e4;
  --color-vfd-off: rgba(52,196,184,0.14);
  --color-vfd-glow: 0.55;
  --gradient-key-face: linear-gradient(155deg, #cfd1d0 0%, #c1c3c3 52%, #b6b8b9 100%);
  --gradient-key-face-red: linear-gradient(155deg, #e7a89f 0%, #d8533f 58%, #c2402d 100%);
  --gradient-key-face-green: linear-gradient(155deg, #bcd9b6 0%, #5aa25f 58%, #48884d 100%);
  --gradient-screen-face: linear-gradient(180deg, #0e1215 0%, #070a0c 100%);
  --gradient-shell-face: linear-gradient(168deg, #deded6 0%, #cfcdc4 58%, #c6c4bb 100%);
  --gradient-shell-face-raised: linear-gradient(168deg, #e8e6de 0%, #d4d2c9 60%, #cac8bf 100%);
  --shadow-key: 0px 6px 10px 0px rgba(35,38,40,0.34), 0px 3px 0px 0px rgba(150,146,132,0.5), inset 0px 1.8px 0px 0px rgba(255,255,255,0.6), inset 0px -4px 7px 0px rgba(66,70,74,0.2), inset 0px 0px 0px 1px rgba(255,255,255,0.18);
  --shadow-key-flush: inset 0px 1.8px 0px 0px rgba(255,255,255,0.6), inset 0px -4px 7px 0px rgba(66,70,74,0.2), inset 0px 0px 0px 1px rgba(255,255,255,0.18);
  --shadow-key-soft: 0px 6px 10px 0px rgba(35,38,40,0.34), inset 0px 1.8px 0px 0px rgba(255,255,255,0.6), inset 0px -4px 7px 0px rgba(66,70,74,0.2), inset 0px 0px 0px 1px rgba(255,255,255,0.18);
  --shadow-shell: 0px 24px 60px 0px rgba(0,0,0,0.55), inset 0px 1px 0px 0px rgba(255,255,255,0.9), inset 0px -2px 5px 0px rgba(120,116,100,0.22), inset 0px 0px 0px 1px rgba(255,255,255,0.34);
  --shadow-screen-recess: inset 0px 2px 6px 0px rgba(0,0,0,0.9), inset 0px 0px 0px 1px rgba(0,0,0,0.5), 0px 1px 0px 0px rgba(255,255,255,0.65);
  --shadow-screen-recess-sm: inset 0px 1px 3px 0px rgba(0,0,0,0.9), inset 0px 0px 0px 1px rgba(0,0,0,0.5), 0px 1px 0px 0px rgba(255,255,255,0.5);
  --shadow-glow-live: 0px 0px 12px 0px rgba(52,196,184,0.6), 0px 0px 24px 0px rgba(52,196,184,0.6);
  --shadow-glow-alert: 0px 0px 12px 0px rgba(224,83,60,0.5), 0px 0px 22px 0px rgba(224,83,60,0.5);
  --shadow-card: 0px 1px 2px 0px rgba(35,37,31,0.06), 0px 8px 24px 0px rgba(35,37,31,0.08);
  --shadow-panel: 0px 1px 0px 0px rgba(35,37,31,0.04), inset 0px 0px 0px 1px rgba(35,37,31,0.12);
  --shadow-pop: 0px 7px 0px 0px rgba(163,160,147,0.9), 0px 12px 26px 0px rgba(10,13,15,0.2), inset 0px 1.5px 0px 0px rgba(255,255,255,0.55);
  --line-soft: rgba(35,37,31,0.12);
  --line-strong: rgba(35,37,31,0.28);
  --line-onscreen: rgba(127,138,134,0.28);
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --pad-gap-keys: 8px;
  --pad-pad-key: 14px;
  --pad-pad-console: 16px;
  --pad-pad-card: 20px;
  --pad-pad-page: 32px;
  --font-display: Archivo, "Arial Narrow", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", SFMono-Regular, ui-monospace, monospace;
  --size-micro: 11px;
  --size-label: 12px;
  --size-caption: 13px;
  --size-body: 15px;
  --size-body-lg: 17px;
  --size-h4: 20px;
  --size-h3: 26px;
  --size-h2: 34px;
  --size-h1: 46px;
  --size-display: 64px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --weight-ultra: 900;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-label: 0.1em;
  --tracking-wide: 0.14em;
  --tracking-stamp: 0.22em;
  --leading-tight: 1.02;
  --leading-snug: 1.16;
  --leading-normal: 1.45;
  --ease-key: cubic-bezier(0.22, 0.9, 0.24, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-press: 0.09s;
  --dur-ui: 0.16s;
  --dur-dialog: 0.42s;
}