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

:root {
  /* Surfaces: the shell sits back, the surface comes forward */
  --shell: #0A0A0A;
  --canvas: #F7F5F7;
  --surface: #FFFFFF;
  --panel: #FBFAFB;

  /* Text and lines */
  --ink: #141014;
  --soft: #3C363C;
  --muted: #6E6870;
  --faint: #A59EA6;
  --hair: #E9E4E9;
  --rule: #D2CBD2;

  /* Text on the shell */
  --shell-ink: #FFFFFF;
  --shell-muted: #A8A1A9;
  --shell-hover: #1C181C;
  --shell-current: #2A242A;

  /* Accent, plum, for focus, selection, active tab and links only. Logo cyan is never used. */
  --accent: #9D1D8F;
  --accent-strong: #7E1773;
  --accent-wash: #F8EAF6;

  /* Semantic, always paired with a word and an icon */
  --pass: #1F7A4D;
  --pass-wash: #E8F5EE;
  --pass-line: #BFE0CD;
  --warning: #946213;
  --warning-wash: #FBF3E4;
  --warning-line: #EBD3A8;
  --block: #A32B2B;
  --block-wash: #FBEBEB;
  --block-line: #EDC0C0;
  --inactive: #6E6870;
  --inactive-wash: #F1EDF1;
  --inactive-line: #D2CBD2;

  /* Typefaces. Never a client font. */
  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-code: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type roles, used as font: var(--type-body). Weights 400, 500 and 600 only. */
  --type-score: 600 44px/48px var(--font-ui);
  --type-score-denominator: 600 22px/48px var(--font-ui);
  --type-figure: 600 28px/32px var(--font-ui);
  --type-title: 600 20px/28px var(--font-ui);
  --type-heading: 600 16px/24px var(--font-ui);
  --type-reading: 400 15px/24px var(--font-ui);
  --type-body: 400 13px/20px var(--font-ui);
  --type-body-strong: 500 13px/20px var(--font-ui);
  --type-body-phone: 400 15px/22px var(--font-ui);
  --type-label: 500 12px/16px var(--font-ui);
  --type-meta: 400 12px/16px var(--font-ui);
  --type-code: 400 12px/20px var(--font-code);
  --measure-reading: 680px;

  /* Spacing, 4px grid */
  --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;

  /* Radius */
  --radius-1: 3px;
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-pill: 999px;

  /* Borders and focus */
  --border: 1px solid var(--hair);
  --border-strong: 1px solid var(--rule);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Depth, a shadow only for things that float */
  --float: 0 2px 6px rgba(20, 16, 20, 0.08), 0 16px 40px rgba(20, 16, 20, 0.16);

  /* Motion */
  --duration-click: 150ms;
  --duration-panel: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --shell-width: 232px;
  --header-height: 56px;
  --row-height: 36px;
  --control-height: 32px;
  --control-height-small: 24px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-click: 0ms;
    --duration-panel: 0ms;
  }
}