/* Desura — design tokens (W3C) */
:root {
  /* Colors */
  --color-obsidian: #09090b;
  --color-ink: #18181b;
  --color-graphite: #3f3f46;
  --color-slate: #52525b;
  --color-steel: #71717a;
  --color-ash: #a1a1aa;
  --color-pebble: #d4d4d8;
  --color-fog: #ececee;
  --color-mist: #f4f4f5;
  --color-snow: #ffffff;
  --color-ember: #10b981;
  --color-orchid-flash: #fe45e2;

  /* Type */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-caption: 10px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 20px;
  --text-heading: 32px;
  --text-heading-lg: 40px;
  --text-display-sm: 56px;
  --text-display: 72px;

  /* Radii */
  --radius-badge: 12px;
  --radius-input: 14px;
  --radius-card-sm: 24px;
  --radius-card: 28px;
  --radius-card-lg: 36px;
  --radius-hero: 48px;
  --radius-pill: 10000px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.04) 0px 4px 12px 0px;
  --shadow-pill: rgba(255, 255, 255, 0.5) 0px 0.5px 0px 0px inset,
                 rgba(117, 123, 133, 0.4) 0px 9px 14px -5px inset,
                 rgb(44, 46, 52) 0px 0px 0px 1.5px,
                 rgba(0, 0, 0, 0.14) 0px 4px 6px 0px;
  --shadow-pill-hover: rgba(255, 255, 255, 0.6) 0px 0.5px 0px 0px inset,
                       rgba(117, 123, 133, 0.5) 0px 12px 18px -6px inset,
                       rgb(44, 46, 52) 0px 0px 0px 2px,
                       rgba(0, 0, 0, 0.18) 0px 6px 10px 0px;

  /* Layout */
  --page-max: 1200px;
  --section-gap: 96px;
}