/* Generated by scripts/gen_tokens.py from Obviously UI tokens.json (version 2). Do not edit by hand. */
@font-face { font-family: "PP Neue Montreal"; src: url("fonts/pp-neue-montreal-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("fonts/pp-neue-montreal-medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("fonts/pp-neue-montreal-semi-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "ObvIcons"; src: url("fonts/obv-icons.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --digital-green: #00ff50;
  --black: #000000;
  --white: #ffffff;
  --aluminium: #e0dad6;
  --grey-blend: #fefefe;
  --grey-muted: #f6f6f6;
  --grey-mid: #ececec;
  --grey-auxiliary: #dddddd;
  --grey-foreground: #616161;
  --primary-brand: #00ff50;
  --on-primary-brand: #000000;
  --secondary-brand: #e0dad6;
  --primary-foreground: #000000;
  --secondary-foreground: #616161;
  --primary-background: #fefefe;
  --secondary-background: #ececec;
  --card: #f6f6f6;
  --auxiliary: #dddddd;
  --error: #ff4242;
  --on-vibrant-palette: #ffffff;
  --link-text: #00c2ff;
  --hovered-container: rgba(0, 0, 0, 0.75);
  --blue-light: #96e6ff;
  --blue-mid: #54d6ff;
  --blue-dark: #00c2ff;
  --yellow-light: #ffe65a;
  --yellow-mid: #ffd902;
  --yellow-dark: #e8c500;
  --orange-light: #ffc977;
  --orange-mid: #ffb23e;
  --orange-dark: #ff9d09;
  --red-light: #ffb9b9;
  --red-mid: #ff7d7d;
  --red-dark: #ff4242;
  --pink-light: #ff91ca;
  --pink-mid: #ff6bb7;
  --pink-dark: #ff319b;
  --purple-light: #b996ff;
  --purple-mid: #894fff;
  --purple-dark: #6b21ff;
  --placeholder-text: #7d818a;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --radius-squared: 0;
  --radius-rounded: 3px;
  --radius-circular: 1000px;
  --input-tiny: 20px;
  --input-small: 32px;
  --input-standard: 40px;
  --button-border-width: 2px;
  --input-border-width: 1px;
  --icon-tiny: 12px;
  --icon-small: 16px;
  --icon-medium: 24px;
  --icon-large: 32px;
  --icon-extra-large: 48px;
  --switch-width: 48px;
  --switch-height: 20px;
  --switch-ring: 3.5px;
  --appbar-height: 80px;
  --primary-header-height: 64px;
  --secondary-header-height: 56px;
  --app-menu-collapsed: 80px;
  --drawer-compact: 480px;
  --drawer-expanded: 1360px;
  --form-field-small: 200px;
  --form-field-medium: 280px;
  --form-field-large: 360px;
  --form-field-extra-large: 480px;
  --dropdown-activator-width: 256px;
  --dropdown-overlay-height: 400px;
  --opacity-disabled: 0.5;
  --opacity-active: 1;
  --opacity-hovered-container: 0.75;
  --opacity-scrollbar-idle: 0.4;
  --elevation-base: none;
  --elevation-mid: 0 5px 10px 0 rgba(0, 0, 0, 0.06);
  --elevation-full: 0 10px 20px 0 rgba(0, 0, 0, 0.12);
  --font-sans: "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-icons: "ObvIcons";
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --grey-blend: #1b1b1b;
  --grey-muted: #2a2a2a;
  --grey-mid: #373737;
  --grey-auxiliary: #4e4e4e;
  --grey-foreground: #bfbfbf;
  --secondary-brand: #000000;
  --primary-foreground: #ffffff;
  --secondary-foreground: #bfbfbf;
  --primary-background: #1b1b1b;
  --secondary-background: #373737;
  --card: #2a2a2a;
  --auxiliary: #4e4e4e;
  --hovered-container: rgba(255, 255, 255, 0.75);
  --elevation-mid: 0 0 3px 2px rgba(78, 78, 78, 0.5);
  --elevation-full: 0 0 6px 4px rgba(78, 78, 78, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grey-blend: #1b1b1b;
  --grey-muted: #2a2a2a;
  --grey-mid: #373737;
  --grey-auxiliary: #4e4e4e;
  --grey-foreground: #bfbfbf;
  --secondary-brand: #000000;
  --primary-foreground: #ffffff;
  --secondary-foreground: #bfbfbf;
  --primary-background: #1b1b1b;
  --secondary-background: #373737;
  --card: #2a2a2a;
  --auxiliary: #4e4e4e;
  --hovered-container: rgba(255, 255, 255, 0.75);
  --elevation-mid: 0 0 3px 2px rgba(78, 78, 78, 0.5);
  --elevation-full: 0 0 6px 4px rgba(78, 78, 78, 0.5);
  color-scheme: dark;
}
.t-display { font: 700 20px/30px var(--font-sans); }
.t-heading { font: 500 16px/24px var(--font-sans); }
.t-title { font: 500 14px/21px var(--font-sans); }
.t-body-bold { font: 700 14px/21px var(--font-sans); }
.t-body { font: 400 14px/21px var(--font-sans); }
.t-body-small-bold { font: 700 12px/18px var(--font-sans); }
.t-body-small { font: 400 12px/18px var(--font-sans); }