/* traq design values v1.2. Rules only; no components. */
:root {
  --color-black: #0A0A0B;
  --color-white: #FFFFFF;
  --color-paper: #F7F7F8;
  --color-surface: #111113;
  --color-purple: #7C3AED;
  --color-purple-soft: #9A66F1;
  --color-emerald: #34D399;
  --color-emerald-dark: #08664E;
  --color-gold: #F2C94C;
  --color-divider: #A6A6AB;
  --color-numeral: #C1C1C5;
  --color-rule-light: #DEDEE2;
  --color-rule-dark: #29292E;
  --color-copy-light: #57575F;
  --color-copy-dark: #AAAAB1;
  --color-quiet-light: #6F6F77;
  --color-quiet-dark: #8A8A92;
  --color-paused: #6F6F77;
  --color-paused-light: #6F6F77;
  --color-paused-dark: #8A8A92;
  --color-purple-text-dark: #9A66F1;
  --color-action-text: var(--color-black);
  --color-sequence-on-light: var(--color-purple);
  --color-sequence-on-dark: var(--color-purple-text-dark);
  --color-identity-text-on-dark: var(--color-purple-text-dark);
  --color-paused-on-light: var(--color-paused-light);
  --color-paused-on-dark: var(--color-paused-dark);
  --color-identity: var(--color-purple);
  --color-action: var(--color-emerald);
  --color-labelOnLight: var(--color-emerald-dark);
  --color-active: var(--color-gold);
  --color-live: var(--color-gold);
  --color-pending: var(--color-gold);
  --color-sequence: var(--color-purple);
  --font-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Clash Grotesk", "Helvetica Neue", Arial, sans-serif;
  --type-label: 12px;
  --type-bodySmall: 14px;
  --type-body: 16px;
  --type-lead: 18px;
  --type-title: 24px;
  --type-heading: 32px;
  --type-displayCompact: 36px;
  --type-display: 50px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-default: 0px;
  --radius-control: 4px;
  --radius-maximum: 8px;
  --grid-columns: 12;
  --grid-compactColumns: 4;
  --grid-maxWidth: 1200px;
  --grid-gutter: 24px;
  --grid-compactGutter: 16px;
  --grid-pageMargin: 48px;
  --grid-compactPageMargin: 24px;
  --grid-artworkModule: 60px;
  --breakpoint-compactMax: 760px;
  --breakpoint-mediumMax: 1100px;
  --weight-regular: 400;
  --weight-medium: 500;
  --tracking: 0;
  --rule-width: 1px;
  --leading-display: 1.04;
  --leading-heading: 1.2;
  --leading-body: 1.55;
  --leading-label: 1.3;
}
/* CSS variables cannot be used in media-query conditions. */
@media (max-width: 760px) {
  :root { --type-display: 36px; --grid-columns: 4; --grid-gutter: 16px; --grid-pageMargin: 24px; }
}