@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500;600&display=swap');

:root {
  color-scheme: light;

  --ink-1: #0B0D10;
  --ink-2: #1A1D22;
  --ink-3: #2A2F37;
  --ink-4: #444A55;
  --ink-5: #5E6470;
  --ink-6: #7C8290;
  --ink-7: #A1A6B2;
  --ink-8: #C4C8D1;
  --ink-9: #DDE0E6;
  --ink-10: #ECEEF1;
  --ink-11: #F4F5F7;
  --ink-12: #FAFAFB;
  --paper: #FFFFFF;

  --signal-50: #FFF1E9;
  --signal-100: #FFD9C2;
  --signal-200: #FFB389;
  --signal-300: #FF8B4F;
  --signal-400: #FF6F2C;
  --signal-500: #FF5A1F;
  --signal-600: #E64412;
  --signal-700: #B8330B;
  --signal-800: #7E2207;

  --critical: #D6233B;
  --high: #E5484D;
  --medium: #F2A93B;
  --low: #6B7280;
  --resolved: #137F4C;
  --info: #1D6FEB;
  --critical-bg: #FBE6E9;
  --high-bg: #FCE9EA;
  --medium-bg: #FDF3E0;
  --resolved-bg: #E3F3EB;
  --info-bg: #E5EFFD;

  --night-1: #06080B;
  --night-2: #0B0D10;
  --night-3: #14181F;
  --night-4: #1E232C;
  --night-5: #2A303B;
  --night-6: #3B414D;
  --night-fg-1: #F4F5F7;
  --night-fg-2: #C4C8D1;
  --night-fg-3: #7C8290;

  --radius-0: 0px;
  --radius-1: 2px;
  --radius-1\.5: 3px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 12px;
  --radius-pill: 999px;

  --space-0: 0px;
  --space-1: 4px;
  --space-1\.5: 6px;
  --space-2: 8px;
  --space-2\.5: 10px;
  --space-3: 12px;
  --space-3\.5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 120px;

  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(11, 13, 16, 0.04), 0 1px 2px rgba(11, 13, 16, 0.06);
  --shadow-2: 0 2px 4px rgba(11, 13, 16, 0.06), 0 4px 12px rgba(11, 13, 16, 0.08);
  --shadow-3: 0 6px 12px rgba(11, 13, 16, 0.08), 0 16px 32px rgba(11, 13, 16, 0.10);

  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'IBM Plex Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 17px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-overline: 11px;
  --fs-mono: 13px;

  --lh-display: 1.04;
  --tr-display: -0.022em;
  --lh-h1: 1.08;
  --tr-h1: -0.018em;
  --lh-h2: 1.12;
  --tr-h2: -0.014em;
  --lh-h3: 1.20;
  --tr-h3: -0.010em;
  --lh-h4: 1.30;
  --tr-h4: -0.004em;
  --lh-body: 1.55;
  --tr-body: 0;
  --lh-body-sm: 1.50;
  --tr-body-sm: 0;
  --lh-caption: 1.40;
  --tr-caption: 0.002em;
  --lh-overline: 1.20;
  --tr-overline: 0.10em;
  --lh-mono: 1.55;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.78, 0.30);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 80ms;
  --dur-2: 140ms;
  --dur-3: 220ms;
  --dur-4: 360ms;

  --fg-1: var(--ink-1);
  --fg-2: var(--ink-3);
  --fg-3: var(--ink-5);
  --fg-4: var(--ink-6);
  --fg-5: var(--ink-7);
  --fg-inverse: var(--paper);
  --fg-link: var(--ink-1);
  --fg-link-hover: var(--signal-600);
  --fg-on-signal: var(--paper);

  --bg-page: var(--ink-12);
  --bg-surface: var(--paper);
  --bg-raised: var(--ink-11);
  --bg-sunken: var(--ink-10);
  --bg-signal: var(--signal-500);
  --bg-selected: #FFF6F0;
  --bg-backdrop: rgba(11, 13, 16, 0.32);

  --border-1: var(--ink-9);
  --border-2: var(--ink-8);
  --border-3: var(--ink-10);
  --border-strong: var(--ink-2);
  --border-focus: var(--signal-500);
  --shadow-focus-ring: 0 0 0 3px rgba(255, 90, 31, 0.28);

  --code-night-ok: #6BCB7F;
  --code-night-warn: #F2C97D;
  --code-night-err: #FF8A95;

  --code-bg: #11181F;
  --code-border: #24323B;
  --code-fg: #CDD3DE;
}

.dark,
html[data-theme="dark"] {
  color-scheme: dark;

  --fg-1: var(--night-fg-1);
  --fg-2: var(--night-fg-2);
  --fg-3: var(--night-fg-3);
  --fg-4: var(--night-6);
  --fg-5: var(--night-6);
  --fg-inverse: var(--night-2);
  --fg-link: var(--night-fg-1);
  --fg-link-hover: var(--signal-300);
  --fg-on-signal: #FFFFFF;

  --bg-page: var(--night-1);
  --bg-surface: var(--night-2);
  --bg-raised: var(--night-3);
  --bg-sunken: var(--night-4);
  --bg-signal: var(--signal-500);
  --bg-selected: rgba(255, 90, 31, 0.10);
  --bg-backdrop: rgba(0, 0, 0, 0.55);

  --border-1: var(--night-5);
  --border-2: var(--night-6);
  --border-3: var(--night-4);
  --border-strong: var(--night-fg-1);
  --border-focus: var(--signal-500);
  --shadow-focus-ring: 0 0 0 3px rgba(255, 90, 31, 0.40);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--signal-100);
  color: var(--ink-1);
}

html[data-theme="dark"] ::selection,
.dark ::selection {
  background: rgba(255, 90, 31, 0.30);
  color: var(--night-fg-1);
}