/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: top;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* stylelint-disable declaration-colon-newline-after */

:root {
  /* TYPOGRAPHY
  /* =============================================================== */

  /**
  * @tokens Font Families
  * @presenter FontFamily
  */

  --font-family: 'National2', helvetica, sans-serif;

  /**
  * @tokens Font Weights
  * @presenter FontWeight
  */

  --font-weight-regular: 400;
  --font-weight-emphasis: 500;

  /**
  * @tokens Font Sizes
  * @presenter FontSize
  */

  /* Heading Large */
  --font-size-heading-lg: 28px;
  --line-height-heading-lg: 36px;
  --letter-spacing-heading-lg: -0.01em;

  /* Heading Medium */
  --font-size-heading-md: 24px;
  --line-height-heading-md: 32px;
  --letter-spacing-heading-md: -0.0075em;

  /* Heading Small */
  --font-size-heading-sm: 21px;
  --line-height-heading-sm: 28px;
  --letter-spacing-heading-sm: -0.005em;

  /* Body Large */
  --font-size-body-lg: 18px;
  --line-height-body-lg: 24px;

  /* Body Medium (Default) */
  --font-size-body-md: 16px;
  --line-height-body-md: 20px;

  /* Body Small */
  --font-size-body-sm: 14px;
  --line-height-body-sm: 16px;

  /* denser body type on desktop */
  @media screen and (width > 768px) {
    --font-size-body-md: 15px;
    --font-size-body-sm: 13px;
  }

  /* SPACING
  /* =============================================================== */

  /**
  * @tokens Spacing
  * @presenter Spacing
  */

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;

  /* BORDER RADII
  /* =============================================================== */

  /**
  * @tokens Border Radius
  * @presenter BorderRadius
  */

  /* Use the small radius for elements smaller than a button (like tags). */
  --border-radius-s: 4px;

  /* Use the medium radius for buttons and button-sized elements. */
  --border-radius-m: 6px;

  /* Use the large radius for elements larger than a button (modals, cards, etc). */
  --border-radius-l: 8px;

  /* Fully rounded */
  --border-radius-full: 999px;

  /**
  * @tokens-end
  */

  /* BREAKPOINTS
  /* =============================================================== */

  --chromebook-width: 1366px;

  /* FOCUS STATE
  /* =============================================================== */

  --focus-glow: 0 0 0 3px var(--color-focus-glow);
  --focus-glow-error: 0 0 0 3px var(--color-focus-glow-error);

  /* STACKING ORDER
  /* =============================================================== */

  /**
  * @tokens Z-Index
  */

  --z-notifications-count: 1;
  --z-focused: 2;
  --z-table-overflow: 3;
  --z-table-first-col: 4;
  --z-table-skeleton: 4;
  --z-table-header: 5;
  --z-table-corner: 6;
  --z-member-stuck-header: 7;
  --z-companion-sidecar: 8;
  --z-dropdown: 9;
  --z-fullpage: 11;
  --z-note: 12;
  --z-filters: 13;
  --z-portal: 50;
  --z-modal: 99;
  --z-modal-dropdown: 100;
  --z-tooltip: 101;
  --z-toast: 102;

  /**
  * @tokens-end
  */

  /* OTHER VARIABLES
  /* =============================================================== */

  --header-height: 56px;
  --sidebar-width: 340px;
  --mobile: 500;
  --tablet: 700;
  --input-height: 40px;
  --editable-title-height: 28px;
  --bezier-in: cubic-bezier(0, 0.5, 0.2, 1);
  --companion-detail-view-max-height: 536px;
  --companion-detail-view-max-width: 360px;

  /* COLOR SCHEME
  /* ===============================================================
  /* Sets theme of browser UI like scrollbars */
  color-scheme: light;

  /* HEXCODE DEFINITIONS
  /* ===============================================================
  /* This is the entire palette that is used within Commons. These colors, once defined, are mapped
  /* to meaningful aliases which allow the color to be safely and consistently applied in both light
  /* and dark mode. Avoid using these hex constants directly unless you are certain that the
  /* color should remain the same in BOTH light and dark mode. */

  /**
  * @tokens Colors
  * @presenter Color
  */

  /* Neutral */
  --hex-white: #fff;
  --hex-gray-10: #f6f6f7;
  --hex-gray-20: #edeef0;
  --hex-gray-30: #e1e2e5;
  --hex-gray-40: #d0d1d6;
  --hex-gray-50: #858995;
  --hex-gray-60: #6c6f7c;
  --hex-gray-70: #545761;
  --hex-gray-80: #3b3d44;
  --hex-gray-90: #1c1d21;
  --hex-gray-100: #17171a;

  /* Red */
  --hex-red-20: #ffe2e0;
  --hex-red-30: #fecbc7;
  --hex-red-40: #f0523e;
  --hex-red-50: #c34431;
  --hex-red-60: #993625;
  --hex-red-70: #6d271a;
  --hex-red-80: #561f14;

  /* Orange */
  --hex-orange-20: #fae5ce;
  --hex-orange-30: #f7d1a9;
  --hex-orange-40: #d46d00;
  --hex-orange-50: #ad5900;
  --hex-orange-60: #884600;
  --hex-orange-70: #603100;
  --hex-orange-80: #4c2700;

  /* Yellow */
  --hex-yellow-20: #fde7a7;
  --hex-yellow-30: #fcd360;
  --hex-yellow-40: #b08106;
  --hex-yellow-50: #906905;
  --hex-yellow-60: #725203;
  --hex-yellow-70: #513902;
  --hex-yellow-80: #402d02;

  /* Neon */
  --hex-neon-20: #e0f27b;
  --hex-neon-30: #cfe072;
  --hex-neon-40: #848f48;
  --hex-neon-50: #6b743b;
  --hex-neon-60: #545b2e;
  --hex-neon-70: #3b4021;
  --hex-neon-80: #2f321a;

  /* Green */
  --hex-green-20: #e0ecdb;
  --hex-green-30: #caddbf;
  --hex-green-40: #619738;
  --hex-green-50: #437e00;
  --hex-green-60: #356200;
  --hex-green-70: #284600;
  --hex-green-80: #213600;

  /* Teal */
  --hex-teal-20: #ceefe7;
  --hex-teal-30: #a7e3d4;
  --hex-teal-40: #5a9386;
  --hex-teal-50: #49786d;
  --hex-teal-60: #395e56;
  --hex-teal-70: #28423d;
  --hex-teal-80: #203430;

  /* Blue */
  --hex-blue-20: #dbe9fe;
  --hex-blue-30: #c0d9fe;
  --hex-blue-40: #3886fb;
  --hex-blue-50: #0064fa;
  --hex-blue-60: #004fc4;
  --hex-blue-70: #00388c;
  --hex-blue-80: #002c6f;

  /* Purple */
  --hex-purple-20: #f0e5f1;
  --hex-purple-30: #e4d1e6;
  --hex-purple-40: #ac75b5;
  --hex-purple-50: #905d9a;
  --hex-purple-60: #704979;
  --hex-purple-70: #4f3456;
  --hex-purple-80: #4a2436;

  /* Pink */
  --hex-pink-20: #f7e3ec;
  --hex-pink-30: #f2cddf;
  --hex-pink-40: #d06597;
  --hex-pink-50: #a9527c;
  --hex-pink-60: #854061;
  --hex-pink-70: #5e2e45;
  --hex-pink-80: #4a2436;

  /* COLOR: SHARED
  /* ===============================================================
  /* The colors past this point may be used in components, views, etc. and will work in both light
  /* and dark modes.

  /* Brand Colors */
  --color-cityblock-blue: var(--hex-blue-50);

  /* COLOR: LIGHT MODE
  /* =============================================================== */

  /* Backgrounds */
  --color-bg-light: var(--hex-white);
  --color-bg: var(--hex-gray-10);

  /* Red */
  --color-red-bg: var(--hex-red-20);
  --color-red-bg-alt: var(--hex-red-30);
  --color-red: var(--hex-red-50);
  --color-red-fg-alt: var(--hex-red-70);
  --color-red-fg: var(--hex-red-80);

  /* Orange */
  --color-orange-bg: var(--hex-orange-20);
  --color-orange-bg-alt: var(--hex-orange-30);
  --color-orange: var(--hex-orange-50);
  --color-orange-fg-alt: var(--hex-orange-70);
  --color-orange-fg: var(--hex-orange-80);

  /* Yellow */
  --color-yellow-bg: var(--hex-yellow-20);
  --color-yellow-bg-alt: var(--hex-yellow-30);
  --color-yellow: var(--hex-yellow-50);
  --color-yellow-fg-alt: var(--hex-yellow-70);
  --color-yellow-fg: var(--hex-yellow-80);

  /* Neon */
  --color-neon-bg: var(--hex-neon-20);
  --color-neon-bg-alt: var(--hex-neon-30);
  --color-neon: var(--hex-neon-50);
  --color-neon-fg-alt: var(--hex-neon-70);
  --color-neon-fg: var(--hex-neon-80);

  /* Green */
  --color-green-bg: var(--hex-green-20);
  --color-green-bg-alt: var(--hex-green-30);
  --color-green: var(--hex-green-50);
  --color-green-fg-alt: var(--hex-green-70);
  --color-green-fg: var(--hex-green-80);

  /* Teal */
  --color-teal-bg: var(--hex-teal-20);
  --color-teal-bg-alt: var(--hex-teal-30);
  --color-teal: var(--hex-teal-50);
  --color-teal-fg-alt: var(--hex-teal-70);
  --color-teal-fg: var(--hex-teal-80);

  /* Blue */
  --color-blue-bg: var(--hex-blue-20);
  --color-blue-bg-alt: var(--hex-blue-30);
  --color-blue: var(--hex-blue-50);
  --color-blue-fg-alt: var(--hex-blue-70);
  --color-blue-fg: var(--hex-blue-80);

  /* Purple */
  --color-purple-bg: var(--hex-purple-20);
  --color-purple-bg-alt: var(--hex-purple-30);
  --color-purple: var(--hex-purple-50);
  --color-purple-fg-alt: var(--hex-purple-70);
  --color-purple-fg: var(--hex-purple-80);

  /* Pink */
  --color-pink-bg: var(--hex-pink-20);
  --color-pink-bg-alt: var(--hex-pink-30);
  --color-pink: var(--hex-pink-50);
  --color-pink-fg-alt: var(--hex-pink-70);
  --color-pink-fg: var(--hex-pink-80);

  /* Gray */
  --color-gray-bg: var(--hex-gray-20);
  --color-gray-bg-alt: var(--hex-gray-30);
  --color-gray: var(--hex-gray-50);
  --color-gray-fg-alt: var(--hex-gray-70);
  --color-gray-fg: var(--hex-gray-80);

  /* Acuity */
  --color-acuity-1: var(--hex-green-40);
  --color-acuity-1-text: var(--hex-white);
  --color-acuity-2: var(--hex-yellow-30);
  --color-acuity-2-text: var(--hex-gray-100);
  --color-acuity-3: var(--hex-orange-40);
  --color-acuity-3-text: var(--hex-white);
  --color-acuity-4: var(--hex-red-40);
  --color-acuity-4-text: var(--hex-white);
  --color-acuity-5: var(--hex-purple-80);
  --color-acuity-5-text: var(--hex-white);

  /* Text */
  --color-link: var(--hex-blue-50);
  --color-link-active: var(--hex-blue-60);
  --color-link-hover: var(--hex-blue-60);
  --color-text: var(--hex-gray-100);
  --color-text-light: var(--hex-gray-80);
  --color-text-placeholder: var(--hex-gray-50);
  --color-text-placeholder-red: var(--hex-red-40);

  /* Icons */
  --color-icon: var(--hex-gray-60);
  --color-icon-hover: var(--hex-gray-70);
  --color-icon-light: var(--hex-gray-40);

  /* Borders */
  --color-border: rgb(0 0 0 / 16%);
  --color-border-light: rgb(0 0 0 / 8%);

  /* Inputs */
  --color-input-bg: var(--hex-white);
  --color-input-bg-focus: var(--hex-white);
  --color-input-bg-disabled: var(--hex-gray-20);
  --color-input-border: var(--color-border);
  --color-input-border-focus: var(--hex-blue-50);
  --color-input-border-error: var(--hex-red-50);

  /* Focus */
  --color-focus-glow: rgb(26 96 232 / 50%);
  --color-focus-glow-error: var(--hex-red-30);

  /* Buttons: Default */
  --color-button-default: var(--hex-white);
  --color-button-default-hover: var(--hex-gray-20);
  --color-button-default-active: var(--hex-gray-30);
  --color-button-default-border: var(--color-border);
  --color-button-default-hover-border: var(--color-border);
  --color-button-default-active-border: var(--color-border);
  --color-button-default-disabled: var(--hex-gray-20);

  /* Buttons: Primary */
  --color-button-primary: var(--hex-blue-50);
  --color-button-primary-hover: var(--hex-blue-40);
  --color-button-primary-active: var(--hex-blue-60);
  --color-button-primary-icon: var(--hex-blue-20);
  --color-button-primary-text: var(--hex-white);

  /* Buttons: Danger */
  --color-button-danger: var(--hex-red-50);
  --color-button-danger-hover: var(--hex-red-40);
  --color-button-danger-active: var(--hex-red-60);
  --color-button-danger-icon: var(--hex-red-20);
  --color-button-danger-text: var(--hex-white);

  /* Buttons: Ghost */
  --color-button-ghost: rgb(255 255 255 / 0%);

  /* Buttons: Icon */
  --color-button-icon: transparent;
  --color-button-icon-hover: rgb(30 29 26 / 12%);
  --color-button-icon-active: rgb(30 29 26 / 16%);

  /* Checkbox and Radio Controls */
  --color-checkbox-bg: var(--hex-white);
  --color-checkbox-border: var(--color-border);
  --color-checkbox-border-focus: var(--hex-blue-40);

  /* Popover */
  --color-popover-bg: var(--hex-white);

  /* Tooltip */
  --color-tooltip-bg: var(--hex-white);

  /* Badges */
  --color-badge-bg: var(--hex-red-60);
  --color-badge-text: var(--hex-white);

  /* Progress */
  --color-progress-bg: rgb(0 0 0 / 10%);
  --color-progress-fg: var(--hex-blue-50);
  --color-progress-fg-subtle: var(--hex-blue-30);

  /* Tabs */
  --color-tab-inactive: var(--hex-gray-70);
  --color-tab-inactive-hover: var(--hex-blue-50);
  --color-tab-active: var(--hex-blue-50);

  /* Nav */
  --color-nav-item-active-bg: var(--hex-blue-20);
  --color-nav-item-active-text: var(--hex-blue-50);
  --color-nav-item-inactive-text: var(--hex-gray-100);
  --color-nav-item-inactive-text-hover: var(--hex-blue-50);

  /* Tags */
  --color-tag-default: var(--hex-gray-20);
  --color-tag-default-hover: var(--hex-gray-30);

  /* Menus */
  --color-menu-item-hover: var(--hex-gray-20);
  --color-menu-item-active: var(--hex-gray-30);
  --color-menu-item-danger-text: var(--hex-red-50);
  --color-menu-item-danger-hover: var(--hex-red-50);
  --color-menu-item-danger-active: var(--hex-red-60);
  --color-menu-item-danger-hover-text: var(--hex-white);
  --color-menu-item-danger-hover-icon: var(--hex-red-20);

  /* Toasts: Default */
  --color-toast-bg: var(--hex-gray-90);
  --color-toast-text: var(--hex-white);
  --color-toast-icon: var(--hex-gray-10);
  --color-toast-button-hover: var(--hex-gray-80);
  --color-toast-button-active: var(--hex-gray-70);

  /* Toasts: Error */
  --color-toast-error-bg: var(--hex-red-60);
  --color-toast-error-text: var(--hex-white);
  --color-toast-error-icon: var(--hex-red-20);
  --color-toast-error-button-hover: var(--hex-red-70);
  --color-toast-error-button-active: var(--hex-red-80);

  /* Toasts: Warning */
  --color-toast-warning-bg: var(--hex-yellow-60);
  --color-toast-warning-text: var(--hex-white);
  --color-toast-warning-icon: var(--hex-yellow-20);
  --color-toast-warning-button-hover: var(--hex-yellow-70);
  --color-toast-warning-button-active: var(--hex-yellow-80);

  /* Toasts: Success */
  --color-toast-success-bg: var(--hex-green-60);
  --color-toast-success-text: var(--hex-white);
  --color-toast-success-icon: var(--hex-green-20);
  --color-toast-success-button-hover: var(--hex-green-70);
  --color-toast-success-button-active: var(--hex-green-80);

  /* Tables */
  --table-loading-gradient: linear-gradient(
    to right,
    rgb(255 255 255 / 10%) 0%,
    rgb(255 255 255 / 20%) 20%,
    rgb(255 255 255 / 60%) 40%,
    rgb(255 255 255 / 85%) 50%,
    rgb(255 255 255 / 60%) 60%,
    rgb(255 255 255 / 20%) 80%,
    rgb(255 255 255 / 10%) 100%
  );

  /* Backdrop */
  --gradient-modal-backdrop: radial-gradient(
    circle,
    rgb(30 29 26 / 40%) 0%,
    rgb(30 29 26 / 70%) 100%
  );

  /**
  * @tokens Shadows
  * @presenter Shadow
  */

  /* Depth */
  --shadow-lv1: 0 2px 4px rgb(0 0 0 / 12%), 0 1px 0 rgb(0 0 0 / 16%);
  --shadow-lv2: 0 4px 8px rgb(0 0 0 / 12%), 0 1px 0 rgb(0 0 0 / 16%);
  --shadow-lv3: 0 6px 12px rgb(0 0 0 / 16%), 0 1px 0 rgb(0 0 0 / 16%);
  --shadow-lv4: 0 8px 16px rgb(0 0 0 / 16%), 0 1px 0 rgb(0 0 0 / 16%);
  --shadow-lv1-hover: var(--shadow-lv2);
  --shadow-lv2-hover: var(--shadow-lv3);
  --shadow-lv3-hover: var(--shadow-lv4);
  --shadow-lv4-hover: 0 16px 32px rgb(0 0 0 / 16%), 0 10px 20px rgb(0 0 0 / 12%);
}

[data-theme='dark'] {
  /* COLOR: DARK MODE
  /* =============================================================== */

  color-scheme: dark;

  /* Backgrounds */
  --color-bg-light: var(--hex-gray-90);
  --color-bg: var(--hex-gray-100);

  /* Red */
  --color-red-bg: var(--hex-red-80);
  --color-red-bg-alt: var(--hex-red-70);
  --color-red: var(--hex-red-40);
  --color-red-fg-alt: var(--hex-red-30);
  --color-red-fg: var(--hex-red-20);

  /* Orange */
  --color-orange-bg: var(--hex-orange-80);
  --color-orange-bg-alt: var(--hex-orange-70);
  --color-orange: var(--hex-orange-40);
  --color-orange-fg-alt: var(--hex-orange-30);
  --color-orange-fg: var(--hex-orange-20);

  /* Yellow */
  --color-yellow-bg: var(--hex-yellow-80);
  --color-yellow-bg-alt: var(--hex-yellow-70);
  --color-yellow: var(--hex-yellow-40);
  --color-yellow-fg-alt: var(--hex-yellow-30);
  --color-yellow-fg: var(--hex-yellow-20);

  /* Neon */
  --color-neon-bg: var(--hex-neon-80);
  --color-neon-bg-alt: var(--hex-neon-70);
  --color-neon: var(--hex-neon-40);
  --color-neon-fg-alt: var(--hex-neon-30);
  --color-neon-fg: var(--hex-neon-20);

  /* Green */
  --color-green-bg: var(--hex-green-80);
  --color-green-bg-alt: var(--hex-green-70);
  --color-green: var(--hex-green-40);
  --color-green-fg-alt: var(--hex-green-30);
  --color-green-fg: var(--hex-green-20);

  /* Teal */
  --color-teal-bg: var(--hex-teal-80);
  --color-teal-bg-alt: var(--hex-teal-70);
  --color-teal: var(--hex-teal-40);
  --color-teal-fg-alt: var(--hex-teal-30);
  --color-teal-fg: var(--hex-teal-20);

  /* Blue */
  --color-blue-bg: var(--hex-blue-80);
  --color-blue-bg-alt: var(--hex-blue-70);
  --color-blue: var(--hex-blue-40);
  --color-blue-fg-alt: var(--hex-blue-30);
  --color-blue-fg: var(--hex-blue-20);

  /* Purple */
  --color-purple-bg: var(--hex-purple-80);
  --color-purple-bg-alt: var(--hex-purple-70);
  --color-purple: var(--hex-purple-40);
  --color-purple-fg-alt: var(--hex-purple-30);
  --color-purple-fg: var(--hex-purple-20);

  /* Pink */
  --color-pink-bg: var(--hex-pink-80);
  --color-pink-bg-alt: var(--hex-pink-70);
  --color-pink: var(--hex-pink-40);
  --color-pink-fg-alt: var(--hex-pink-30);
  --color-pink-fg: var(--hex-pink-20);

  /* Gray */
  --color-gray-bg: var(--hex-gray-80);
  --color-gray-bg-alt: var(--hex-gray-70);
  --color-gray: var(--hex-gray-40);
  --color-gray-fg-alt: var(--hex-gray-30);
  --color-gray-fg: var(--hex-gray-20);

  /* Acuity */
  --color-acuity-1: var(--hex-green-40);
  --color-acuity-1-text: var(--hex-white);
  --color-acuity-2: var(--hex-yellow-30);
  --color-acuity-2-text: var(--hex-gray-100);
  --color-acuity-3: var(--hex-orange-50);
  --color-acuity-3-text: var(--hex-white);
  --color-acuity-4: var(--hex-red-50);
  --color-acuity-4-text: var(--hex-white);
  --color-acuity-5: var(--hex-purple-60);
  --color-acuity-5-text: var(--hex-white);

  /* Text */
  --color-link: var(--hex-blue-40);
  --color-link-active: var(--hex-blue-40);
  --color-link-hover: var(--hex-blue-40);
  --color-text: var(--hex-gray-10);
  --color-text-light: var(--hex-gray-40);
  --color-text-placeholder: var(--hex-gray-50);
  --color-text-placeholder-red: var(--hex-red-60);

  /* Icons */
  --color-icon: var(--hex-gray-50);
  --color-icon-hover: var(--hex-gray-40);
  --color-icon-light: var(--hex-gray-70);

  /* Borders */
  --color-border: rgb(255 255 255 / 12%);
  --color-border-light: rgb(255 255 255 / 6%);

  /* Inputs */
  --color-input-bg: var(--hex-black);
  --color-input-bg-focus: var(--hex-black);
  --color-input-bg-disabled: var(--hex-gray-80);
  --color-input-border: var(--color-border);
  --color-input-border-focus: var(--hex-blue-50);
  --color-input-border-error: var(--hex-red-50);

  /* Focus */
  --color-focus-glow: rgb(26 96 232 / 80%);

  /* Buttons: Default */
  --color-button-default: var(--hex-gray-90);
  --color-button-default-hover: var(--hex-gray-80);
  --color-button-default-active: var(--hex-gray-70);
  --color-button-default-border: var(--color-border);
  --color-button-default-hover-border: var(--color-border);
  --color-button-default-active-border: var(--color-border);
  --color-button-default-disabled: var(--hex-gray-80);

  /* Buttons: Primary */
  --color-button-primary: var(--hex-blue-50);
  --color-button-primary-hover: var(--hex-blue-40);
  --color-button-primary-active: var(--hex-blue-60);
  --color-button-primary-icon: var(--hex-blue-20);
  --color-button-primary-text: var(--hex-white);

  /* Buttons: Danger */
  --color-button-danger: var(--hex-red-50);
  --color-button-danger-hover: var(--hex-red-40);
  --color-button-danger-active: var(--hex-red-60);
  --color-button-danger-icon: var(--hex-red-20);
  --color-button-danger-text: var(--hex-white);

  /* Buttons: Ghost */
  --color-button-ghost: rgb(0 0 0 / 0%);

  /* Buttons: Icon */
  --color-button-icon: transparent;
  --color-button-icon-hover: rgb(255 255 255 / 6%);
  --color-button-icon-active: rgb(255 255 255 / 10%);

  /* Checkbox and Radio Controls */
  --color-checkbox-bg: var(--hex-gray-90);
  --color-checkbox-border: var(--color-border);
  --color-checkbox-border-focus: var(--hex-blue-40);

  /* Popover */
  --color-popover-bg: var(--hex-gray-90);

  /* Tooltip */
  --color-tooltip-bg: var(--hex-gray-80);

  /* Badges */
  --color-badge-bg: var(--hex-red-60);
  --color-badge-text: var(--hex-white);

  /* Progress */
  --color-progress-bg: rgb(255 255 255 / 10%);
  --color-progress-fg: var(--hex-blue-40);
  --color-progress-fg-subtle: var(--hex-blue-60);

  /* Tabs */
  --color-tab-inactive: var(--hex-gray-40);
  --color-tab-inactive-hover: var(--hex-gray-20);
  --color-tab-active: var(--hex-white);

  /* Nav */
  --color-nav-item-active-bg: var(--hex-blue-80);
  --color-nav-item-active-text: var(--hex-blue-20);
  --color-nav-item-inactive-text: var(--hex-gray-40);
  --color-nav-item-inactive-text-hover: var(--hex-gray-20);

  /* Tags */
  --color-tag-default: var(--hex-gray-80);
  --color-tag-default-hover: var(--hex-gray-70);

  /* Menus */
  --color-menu-item-hover: rgb(255 255 255 / 6%);
  --color-menu-item-active: rgb(255 255 255 / 10%);
  --color-menu-item-danger-text: var(--hex-red-40);
  --color-menu-item-danger-hover: var(--hex-red-50);
  --color-menu-item-danger-active: var(--hex-red-60);
  --color-menu-item-danger-hover-text: var(--hex-white);
  --color-menu-item-danger-hover-icon: var(--hex-red-20);

  /* Toasts: Default */
  --color-toast-bg: var(--hex-gray-10);
  --color-toast-text: var(--hex-gray-90);
  --color-toast-icon: var(--hex-gray-70);
  --color-toast-button-hover: var(--hex-gray-20);
  --color-toast-button-active: var(--hex-gray-30);

  /* Toasts: Error */
  --color-toast-error-bg: var(--hex-red-20);
  --color-toast-error-text: var(--hex-red-80);
  --color-toast-error-icon: var(--hex-red-70);
  --color-toast-error-button-hover: var(--hex-red-30);
  --color-toast-error-button-active: var(--hex-red-30);

  /* Toasts: Warning */
  --color-toast-warning-bg: var(--hex-yellow-20);
  --color-toast-warning-text: var(--hex-yellow-80);
  --color-toast-warning-icon: var(--hex-yellow-70);
  --color-toast-warning-button-hover: var(--hex-yellow-30);
  --color-toast-warning-button-active: var(--hex-red-30);

  /* Toasts: Success */
  --color-toast-success-bg: var(--hex-green-20);
  --color-toast-success-text: var(--hex-yellow-80);
  --color-toast-success-icon: var(--hex-yellow-70);
  --color-toast-success-button-hover: var(--hex-green-30);
  --color-toast-success-button-active: var(--hex-green-30);

  /* Tables */
  --table-loading-gradient: linear-gradient(
    to right,
    rgb(0 0 0 / 10%) 0%,
    rgb(0 0 0 / 20%) 20%,
    rgb(0 0 0 / 60%) 40%,
    rgb(0 0 0 / 85%) 50%,
    rgb(0 0 0 / 60%) 60%,
    rgb(0 0 0 / 20%) 80%,
    rgb(0 0 0 / 10%) 100%
  );

  /* Backdrop */
  --gradient-modal-backdrop: radial-gradient(circle, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 70%) 100%);

  /* Depth */
  --shadow-lv1: 0 2px 4px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-lv2: 0 4px 8px rgb(0 0 0 / 40%), 0 2px 4px rgb(0 0 0 / 40%);
  --shadow-lv3: 0 6px 12px rgb(0 0 0 / 40%), 0 4px 8px rgb(0 0 0 / 40%);
  --shadow-lv4: 0 10px 20px rgb(0 0 0 / 40%), 0 6px 12px rgb(0 0 0 / 40%);
  --shadow-lv1-hover: var(--shadow-lv2);
  --shadow-lv2-hover: var(--shadow-lv3);
  --shadow-lv3-hover: var(--shadow-lv4);
  --shadow-lv4-hover: 0 16px 32px rgb(0 0 0 / 40%), 0 10px 20px rgb(0 0 0 / 30%);
}
@font-face {
  font-family: 'National2';
  font-weight: 400;
  src: url('../assets/fonts/national-2-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'National2';
  font-style: italic;
  font-weight: 400;
  src: url('../assets/fonts/national-2-regular-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'National2';
  font-weight: 500;
  src: url('../assets/fonts/national-2-medium.woff2') format('woff2');
}

@font-face {
  font-family: 'National2';
  font-style: italic;
  font-weight: 500;
  src: url('../assets/fonts/national-2-medium-italic.woff2') format('woff2');
}
html {
  margin: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  padding: 0;
  letter-spacing: 0;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

h1 {
  font-weight: var(--font-weight-emphasis);
  font-size: var(--font-size-heading-lg);
  line-height: var(--line-height-heading-lg);
  letter-spacing: var(--letter-spacing-heading3);
}

h2 {
  font-weight: var(--font-weight-emphasis);
  font-size: var(--font-size-heading-md);
  line-height: var(--line-height-heading-md);
  letter-spacing: var(--letter-spacing-heading-md);
}

h3 {
  font-weight: var(--font-weight-emphasis);
  font-size: var(--font-size-heading-sm);
  line-height: var(--line-height-heading-sm);
  letter-spacing: var(--letter-spacing-heading-sm);
}

h4 {
  font-weight: var(--font-weight-emphasis);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}

h5,
h6 {
  font-weight: var(--font-weight-emphasis);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}

strong {
  font-weight: var(--font-weight-emphasis);
}

small {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

button,
input,
textarea,
select,
dialog {
  color: var(--color-text);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-md);
  font-family: var(--font-family);
  line-height: var(--line-height-body-md);
  margin: 0;
}

select {
  background: var(--color-input-bg);
  border-radius: var(--border-radius-m);
  height: var(--input-height);
  border: 1px solid var(--color-border);
}

input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-md);
  font-family: var(--font-family);
  line-height: var(--line-height-body-md);
  color: var(--color-text-placeholder);
}

a {
  color: var(--color-link);
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
  transition: color 0.3s;
  text-decoration: none;
}

img {
  max-width: 100%;
}

em {
  font-style: italic;
}

pre {
  white-space: pre-wrap;
}
.visuallyHidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
:root {
  --line-height-prose: 1.5;
  --line-height-heading: 1.2;
}

.principlesContainer {
  max-width: 780px;
  margin: 0 auto;
}

.principlesMain {
  padding: 40px var(--space-md);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-prose);
}

/* ----- principlesHeader ----- */

.principlesHeader {
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
}

.navLink {
  color: var(--color-text);
}

.navLinkSelected {
  font-weight: var(--font-weight-emphasis);
}

/* ----- hero ----- */

.hero {
  text-align: center;
}

.heroTitle {
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-2xl);
}

.heroBody {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  margin: var(--space-xl) 0;
}

.heroImage {
  display: block;
  margin: var(--space-xl) auto;
}

/* -----  ----- */

.tightColumn {
  max-width: 620px;
  margin: var(--space-2xl) auto;
}

.smallTitle {
  color: var(--hex-gray-60);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body-lg);
  margin: var(--space-2xl) 0;
  text-align: center;
}

.sectionTitle {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-normal);
  margin: var(--space-xl) 0 var(--space-sm);
}

.enderIcon {
  display: block;
  margin: 120px auto var(--space-2xl);
}


@media (min-width: 481px) {
  .principlesMain {
    padding: 120px var(--space-xl);
    font-size: var(--font-size-body-lg);
  }

  .heroTitle {
    font-size: 48px;
    margin-bottom: var(--space-3xl);
  }

  .heroBody {
    font-size: var(--font-size-heading-md);
    line-height: var(--line-height-heading-md);
  }

  .smallTitle {
    font-size: var(--font-size-heading-sm);
    line-height: var(--line-height-heading-sm);
    margin: var(--space-2xl) 0;
  }

  .sectionTitle {
    font-size: var(--font-size-heading-md);
    line-height: var(--line-height-heading-md);
    margin: var(--space-2xl) 0 var(--space-md);
  }
}