@font-face {
  font-family: "MD IO";
  src:
    url("/assets/MDIO-VF-59ecccb8.woff2") format("woff2"),
    url("/assets/MDIO-VF-39196574.woff") format("woff");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "MD IO Aligned";
  src:
    url("/assets/MDIO-VF-59ecccb8.woff2") format("woff2"),
    url("/assets/MDIO-VF-39196574.woff") format("woff");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 98%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* ----------------------------------------------------------------
   * ! COLOR */

  --color--gray-900: oklch(35% 0 250);
  /* Text */
  --color--aa-text: #767676;
  --color--aaa-high-contrast-text: #434343;
  --color--aaa-text: #595959;
  --color--max-text: #000;
  --color--text: var(--color--aa-text);
  --color--text-inverse: var(--color--bg-max);
  /* Backgrounds */
  --color--bg-1: #f8f8f8;
  --color--bg-2: #e5e5e5;
  --color--bg-base: #fcfcfc;
  --color--bg-max: white;
  --color--bg-raised: var(--color--bg-max);
  /* Borders */
  --color--border-low-contrast: #eaeaea;
  --color--border-mid-contrast: #c6c6c6;
  --color--border-high-contrast: #bbb;
  /* Other */
  --color--a11y-icon: hsl(337, 79%, 61%);
  --color--aaa-text-critical: #ff0000;
  --color--link: var(--color--max-text);
  --color--link-hover: var(--color--max-text);
  --color--selection-bg: #fff5c1;
  --color--selection-text: #000;
  /* --color--not-a11y-icon: #FF76BF; */
  --color--not-a11y-icon: #8AC2A5;
  --color--primary-base: blue;
  --color--primary-dark: var(--color--max-text);
  /* Bookmark */
  --color--bookmark: oklch(0.88 0.15 90);
  --color--bookmark-inactive: oklch(0.90 0 90);
  --color--bookmark-inactive-hover: oklch(0.80 0.01 90);

  /* ----------------------------------------------------------------
   * ! FONTS */

  --font-family--body: "InterVariable", "Inter", system-ui, "Helvetica", "Arial", sans-serif;
  --font-family--mono:
    /* "MD IO",
    "MDIO", */
    ui-monospace,
    "SFMono-Regular",
    Menlo,
    Monaco,
    Consolas,
    "Cascadia Mono",
    "Liberation Mono",
    "DejaVu Sans Mono",
    monospace !important;
  --font-family--blockquote:
    Monaco,
    Consolas,
    "Cascadia Mono",
    "Liberation Mono",
    "DejaVu Sans Mono",
    "SFMono-Regular",
    Menlo,
    monospace;
  --font-features--body: "liga" 1, "calt" 1, "ss04", "ss01";
  /* Size */
  --font-size--body: 0.875rem;
  --font-size--small: 0.75rem;
  --font-size--ui: 0.875rem;
  /* Weight */
  --font-weight--bold: 700;
  --font-weight--light: 300;
  --font-weight--medium: 500;
  --font-weight--normal: 400;
  --line-height--base: 1.5;
  --line-height--ui: 24px;

  /* ----------------------------------------------------------------
   * ! BORDERS */

  --border--base: var(--border-width--base) solid var(--color--border-mid-contrast);
  --border--light: var(--border-width--base) solid var(--color--border-low-contrast);
  --border-radius--base: 0.5rem;
  --border-radius--circle: 100%;
  --border-radius--small: 0.25rem;
  --border-width--base: 1px;
  --border-width--thick: 4px;

  /* ----------------------------------------------------------------
   * ! SPACE */

  --container--base: 43rem;
  --container-inline-padding: 2rem;
  --input-height: 56px;
  --input-padding:   var(--space--base);
  --space--base:     1rem;
  --space--large:    2rem;
  --space--medium:   1.5rem;
  --space--small:    0.75rem;
  --space--x-small:  0.5rem;
  --space--xx-small: 0.25rem;

  /* ----------------------------------------------------------------
   * ! Z-INDEX */

  --z-index--content: 1;
  --z-index--dropdown: 100;
  --z-index--flash: 10000;
  --z-index--layout: 1000;
  --z-index--overlay: 5000;

  /* ----------------------------------------------------------------
   * ! TRANSITION */

  --transition-duration--base: 0.2s;
  --transition-timing--base: ease-in-out;

  /* ----------------------------------------------------------------
   * ! ICONS */

  --icon-select-caret: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" fill="none"><path fill="%23888888" fill-rule="evenodd" d="M.65.63A.875.875 0 0 1 1.885.602L4.828 3.42 7.77.603a.875.875 0 1 1 1.21 1.264l-3.374 3.23a1.125 1.125 0 0 1-1.556 0L.676 1.868A.875.875 0 0 1 .649.629Z" clip-rule="evenodd"/></svg>');
}

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

  /* ----------------------------------------------------------------
   * ! COLOR */

  --color--blue-900: oklch(20% 0.05 250);
  --color--gray-900: oklch(25% 0 250);
  /* Text */
  --color--aa-text: oklch(60.66% 0 0);
  --color--aaa-high-contrast-text: oklch(88% 0 0);
  --color--aaa-text: oklch(72.52% 0 0);
  --color--aaa-text-critical: #ff4482;
  --color--max-text: #FFF;
  --color--text: var(--color--aaa-text);
  --color--text-inverse: var(--color--bg-max);
  /* Backgrounds */
  --color--bg-base: #141414;
  --color--bg-1: #1A1A1A;
  --color--bg-2: #2e2e2e;
  --color--bg-max: #0d0d0d;
  --color--bg-raised: var(--color--bg-2);
  /* Borders */
  --color--border-low-contrast: #313131;
  --color--border-mid-contrast: #666666;
  --color--border-high-contrast: #8a8a8a;
  /* Other */
  --color--a11y-icon: hsl(337, 79%, 71%);
  --color--not-a11y-icon: #b0ba8b;
  /* --color--not-a11y-icon: #8cb47f; */
  /* --color--not-a11y-icon: #8AC2A5; */
  --color--link: var(--color--aaa-high-contrast-text);
  --color--link-hover: white;
  --color--selection-bg: #5b4e1d;
  --color--selection-text: #fff;
  --color--primary-base: #6bffd6;
  --color--primary-dark: #4ae9bd;
  --color--primary-light: var(--color--blue-900);
  /* Bookmark */
  --color--bookmark: oklch(0.85 0.18 90);
  --color--bookmark-inactive: var(--color--border-mid-contrast);
  --color--bookmark-inactive-hover: var(--color--aa-text);

  /* ----------------------------------------------------------------
   * ! BORDERS */

  --border--base: var(--border-width--base) solid var(--color--border-mid-contrast);
  --border--light: var(--border-width--base) solid var(--color--gray-900);
}