:root {
  --grey-25: #F8F8F8;
  --grey-50: #F2F2F2;
  --grey-100: #E6E6E6;
  --grey-200: #CCCCCC;
  --grey-300: #B3B3B3;
  --grey-400: #999999;
  --grey-500: #808080;
  --grey-600: #666666;
  --grey-700: #4D4D4D;
  --grey-800: #333333;
  --grey-850: #262626;
  --grey-900: #1A1A1A;

  --teal-25: #F0FEFE;
  --teal-50: #E1FCFC;
  --teal-100: #C8FAFA;
  --teal-200: #87EDEC;
  --teal-300: #5FE2E1;
  --teal-400: #2FD7D5;
  --teal-500: #01CDCB;
  --teal-550: #00B5B3;
  --teal-600: #00A3A1;
  --teal-700: #007B7A;
  --teal-800: #005051;
  --teal-900: #002529;

  --green-25: #F4FBF8;
  --green-50: #E9F7F2;
  --green-100: #D3F0E4;
  --green-200: #A7E1C9;
  --green-300: #7AD1AF;
  --green-400: #4EC294;
  --green-500: #22B379;
  --green-600: #1B8F61;
  --green-700: #146B49;
  --green-800: #0E4830;
  --green-900: #072418;

  --blue-25: #F3F9FC;
  --blue-50: #E8F4F8;
  --blue-100: #D0E9F2;
  --blue-200: #A2D3E5;
  --blue-300: #73BDD7;
  --blue-400: #44A6CA;
  --blue-500: #1690BD;
  --blue-600: #117397;
  --blue-700: #0D5771;
  --blue-800: #093A4C;
  --blue-900: #041D26;

  --red-25: #FFF1F1;
  --red-50: #FFE3E3;
  --red-100: #FCCCCC;
  --red-200: #FA9D9D;
  --red-300: #EB7878;
  --red-400: #DD5555;
  --red-500: #D42B2B;
  --red-600: #AA2222;
  --red-700: #7F1A1A;
  --red-800: #5E1313;
  --red-900: #2A0909;

  --orange-25: #FEF7F4;
  --orange-50: #FEEFEA;
  --orange-100: #FDE1D7;
  --orange-200: #FCC3AE;
  --orange-300: #FCA486;
  --orange-400: #FF8054;
  --orange-500: #F7632F;
  --orange-600: #DB4916;
  --orange-700: #9E3611;
  --orange-800: #6B260D;
  --orange-900: #36160A;

  --white: #FFFFFF;

  --text-heading: var(--grey-900);
  --text-page-title: var(--grey-850);
  --text-body: var(--grey-800);
  --text-secondary: var(--grey-600);
  --text-annotation: var(--grey-500);
  --text-disabled: var(--grey-300);
  /* --text-accent: var(--teal-600); */
  --text-inverse: var(--white);

  --link: var(--teal-550);
  --link-hover: var(--orange-500);
  --nav-link: var(--grey-800);
  --nav-link-active: var(--teal-550);
  --nav-link-hover: var(--orange-500);

  /* --icon-default: var(--grey-800); */
  --icon-strong: var(--grey-900);
  --icon-muted: var(--grey-400);

  --surface-page: var(--white);
  --surface-header-control: var(--white);
  /* --surface-subtle: var(--grey-25); */
  --surface-muted: var(--grey-50);
  --surface-footer: #ECEEEE;
  --footer-title-color: #000000;
  --footer-text-color: #222223;
  /* --surface-accent: var(--teal-50); */
  --surface-raised: color-mix(in srgb, var(--grey-900) 2%, var(--white));
  --surface-hover-accent: var(--orange-50);
  --button-gradient: linear-gradient(212deg, #00FDD7 18.73%, #38E0DE 81.27%);

  --overlay-2: rgb(26 26 26 / 2%);
  --overlay-5: rgb(26 26 26 / 5%);
  /* --overlay-10: rgb(26 26 26 / 10%); */
  /* --overlay-15: rgb(26 26 26 / 15%); */
  --overlay-80: rgb(26 26 26 / 80%);

  --tint-teal-5: rgb(0 181 179 / 5%);
  --tint-orange-5: rgb(247 99 47 / 5%);
  --tint-orange-10: rgb(247 99 47 / 10%);

  --status-note: var(--blue-500);
  --status-note-tint: rgb(22 144 189 / 10%);
  --status-tip: var(--green-500);
  --status-tip-tint: rgb(34 179 121 / 10%);
  --status-important: var(--red-500);
  --status-important-tint: rgb(212 43 43 / 10%);
  --status-warning: var(--orange-500);
  --status-warning-tint: rgb(247 99 47 / 10%);
  --status-note-solid: color-mix(in srgb, var(--blue-500) 10%, var(--white));
  --status-tip-solid: color-mix(in srgb, var(--green-500) 10%, var(--white));
  --status-important-solid: color-mix(in srgb, var(--red-500) 10%, var(--white));
  --status-warning-solid: color-mix(in srgb, var(--orange-500) 10%, var(--white));

  --code-comment: #999988;
  --code-keyword: #333333;
  --code-literal: #008080;
  --code-string: #DD1144;
  --code-title: #990000;
  --code-type: #445588;
  --code-attr: #000080;
  --code-link: #009926;
  --code-symbol: #990073;
  --code-builtin: #0086B3;
  --code-meta: #999999;

  --border-subtle: var(--grey-100);
  --border-layout: var(--grey-100);
  --border-strong: var(--grey-200);
  /* --border-control-hover: var(--grey-400); */
  /* --border-dark: var(--grey-900); */
  --border-accent: var(--teal-550);
  --border-hover: var(--orange-500);
  /* --accent-line: var(--teal-500); */
  --focus-ring: var(--teal-550);

  --font-base: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "Roboto Mono", monospace;
  --nav-font-size: 14px;
  --nav-font-step: 0.15px;

  --weight-regular: 380;
  --weight-medium: 500;
  --weight-display: 425;
  --weight-heading: 500;
  --weight-accent: 550;

  --title-1: 425 36px/1.25 var(--font-base);
  --title-2: var(--weight-heading) 26px/1.4 var(--font-base);
  --title-3: var(--weight-heading) 22px/1.4 var(--font-base);
  --title-4: var(--weight-accent) 20px/1.4 var(--font-base);
  --title-5: var(--weight-accent) 18px/1.4 var(--font-base);
  --body: var(--weight-regular) 16px/1.75 var(--font-base);
  --body-accent: var(--weight-accent) 16px/1.75 var(--font-base);
  --navigate-1: var(--weight-regular) var(--nav-font-size)/1.5 var(--font-base);
  /* --navigate-1-accent: var(--weight-accent) 13px/1.5 var(--font-base); */
  --navigate-2: var(--weight-regular) 13px/1.375 var(--font-base);
  --caption: var(--weight-regular) 12px/16px var(--font-base);
  --caption-accent: var(--weight-medium) 12px/16px var(--font-base);
  --badge: var(--weight-accent) 14px/1.5 var(--font-base);
  --control: var(--weight-regular) 14px/1.5 var(--font-base);
  --link-card: var(--weight-regular) 16px/1.75 var(--font-base);
  --tab: var(--weight-accent) 16px/24px var(--font-base);
  --summary: var(--weight-regular) 1em/1.75 var(--font-base);
  --navigate-2-accent: var(--weight-accent) 12px/1.5 var(--font-base);
  /* --mono: var(--weight-regular) 14px/1.625 var(--font-mono); */
  --footer-title: var(--weight-accent) 18px/1.58 var(--font-base);
  --footer-text: var(--weight-regular) 16px/1.72 var(--font-base);

  --header-height: 64px;
  --toolbar-height: 69px;
  /* Desktop breadcrumbs scroll with the article and reserve no sticky space. */
  --toolbar-occupied-height: 0px;
  --nav-width: 270px;
  --nav-item-gap: 10px;
  --nav-row-height: 22px;
  /* Visible spacing is 1.5 font sizes; compensate for space inside line boxes. */
  --nav-reference-gap: calc(var(--nav-font-size) * 1.5);
  --nav-text-space-top: 5px;
  --nav-text-space-bottom: 4px;
  --article-width: 720px;
  --heading-text-gap: 20px;
  /* Follow the existing 40:32 spacing step for sections and subheadings. */
  --page-lead-gap: calc(var(--heading-text-gap) * 1.25);
  --toc-width: 226px;
  /* --section-gap: 40px; */

  --radius-block: 8px;
  --radius-inline: 4px;
  --stroke: 1px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --text-heading: var(--grey-100);
  --text-page-title: var(--grey-100);
  --text-body: var(--grey-200);
  --text-secondary: var(--grey-300);
  --text-annotation: var(--grey-400);
  --text-disabled: var(--grey-600);
  /* --text-accent: var(--teal-500); */

  --link: var(--teal-550);
  --nav-link: var(--grey-200);
  --nav-link-active: var(--teal-550);

  /* --icon-default: var(--grey-200); */
  --icon-strong: var(--grey-100);
  --icon-muted: var(--grey-500);

  --surface-page: var(--grey-900);
  /* --surface-subtle: var(--grey-850); */
  --surface-muted: var(--grey-850);
  --surface-header-control: var(--grey-850);
  --surface-footer: #202222;
  /* --surface-accent: var(--teal-900); */
  --surface-raised: color-mix(in srgb, var(--white) 4%, var(--grey-900));
  --surface-hover-accent: var(--orange-900);

  --overlay-2: rgb(255 255 255 / 4%);
  --overlay-5: rgb(255 255 255 / 7%);
  /* --overlay-10: rgb(255 255 255 / 12%); */
  /* --overlay-15: rgb(255 255 255 / 18%); */
  --overlay-80: var(--grey-700);

  --tint-teal-5: rgb(0 181 179 / 10%);
  --tint-orange-5: rgb(247 99 47 / 10%);
  --tint-orange-10: rgb(247 99 47 / 16%);

  --status-note-tint: rgb(22 144 189 / 16%);
  --status-tip-tint: rgb(34 179 121 / 16%);
  --status-important-tint: rgb(212 43 43 / 16%);
  --status-warning-tint: rgb(247 99 47 / 16%);
  --status-note-solid: color-mix(in srgb, var(--blue-500) 16%, var(--grey-900));
  --status-tip-solid: color-mix(in srgb, var(--green-500) 16%, var(--grey-900));
  --status-important-solid: color-mix(in srgb, var(--red-500) 16%, var(--grey-900));
  --status-warning-solid: color-mix(in srgb, var(--orange-500) 16%, var(--grey-900));

  --border-subtle: var(--grey-800);
  --border-layout: var(--grey-700);
  --border-strong: var(--grey-700);
  /* --border-control-hover: var(--grey-500); */
  /* --border-dark: var(--grey-100); */
  --border-accent: var(--teal-550);
  --focus-ring: var(--teal-550);

  --footer-title-color: var(--grey-100);
  --footer-text-color: var(--grey-100);

  --code-comment: var(--grey-500);
  --code-keyword: var(--grey-100);
  --code-literal: var(--teal-400);
  --code-string: var(--orange-300);
  --code-title: var(--red-300);
  --code-type: var(--blue-300);
  --code-attr: var(--blue-200);
  --code-link: var(--green-300);
  --code-symbol: var(--red-200);
  --code-builtin: var(--blue-300);
  --code-meta: var(--grey-400);
}