html {
  --font-family: 'Public Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-size: 14px;

  --disabled-opacity: 0.6;

  /* Animations */
  --transition-speed: 250ms;
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Smoothness */
  --curvature: 6px;
  --curvature-widget: 6px;

  /* RGB values — Grasp brand: cyan / indigo / gold */
  --primary-rgb: 0, 172, 213;
  --secondary-rgb: 52, 69, 158;
  --tertiary-rgb: 200, 162, 74;
  --focus-rgb: 0, 172, 213;
  --error-rgb: 199, 53, 69;
  --success-rgb: 78, 133, 99;
  --selection-light-rgb: 240, 240, 240;
  --selection-dark-rgb: 180, 180, 180;

  /* Colors */
  --color-primary: rgb(var(--primary-rgb));
  --color-text-dark: #1a2233;
  --color-text: #1a2233;
  --color-widget-text: #1a2233;
  --color-borders: rgba(0, 0, 0, 0.07);
  --color-placeholder: #ccc;
  --color-primary-light: #eee;
  --color-secondary-light: rgba(var(--secondary-rgb), 0.3);
  --color-primary-dark: rgb(var(--primary-rgb));
  --color-secondary-dark: rgb(var(--secondary-rgb));
  --color-message: #34459e;
  --color-focus: #7fd6ec;
  --color-widget-bg: #fff;
  --color-widget-bg-focused: #fff;
  --color-widget-border: #c3c9dd;
  --color-options-bg: var(--color-widget-bg);
  --color-selection: #dff4fa;
  --color-row-hover: #f0f2f8;
  --focused-tab-color: #fff;
  --unselect-tab-color: #f0f2f8;
  --color-available: #00f100;
  --color-tertiary: rgb(var(--tertiary-rgb));
  --color-text-light: rgba(255, 255, 255, 1);
  --color-text-dark-secondary: rgba(0, 0, 0, 0.25);
  --color-overlay-dark: rgba(0, 0, 0, 0.2);
  --color-overlay-dark-text: rgba(255, 255, 255, 0.9);
  --color-overlay-light: rgba(0, 0, 0, 0.035);
  --color-overlay-light-text: rgba(0, 0, 0, 0.6);
  --color-link-primary: rgba(var(--primary-rgb), 0.8);
  --color-link-primary-hover: rgba(var(--primary-rgb), 0.9);
  --color-link-secondary: rgba(var(--secondary-rgb), 0.8);
  --color-link-secondary-hover: rgba(var(--secondary-rgb), 0.9);
  --color-button-primary: var(--color-primary-dark);
  --color-button-primary-text: var(--color-text-light);
  --color-button-light: rgb(246, 248, 250);
  --color-button-light-text: rgb(36, 41, 47);
  --color-button-secondary: var(--color-secondary-light);
  --color-button-secondary-text: var(--color-text-dark);
  --color-button-destructive: rgb(var(--error-rgb));
  --color-button-destructive-text: var(--color-text-light);
  --color-button-attention: #4e8563;
  --color-connectors: #a5dfef;
  --color-label-primary: var(--color-primary-dark);
  --color-label-primary-text: var(--color-text-light);
  --color-label-secondary: var(--color-secondary-dark);
  --color-label-secondary-text: var(--color-text-light);
  --color-label-tertiary: var(--color-tertiary);
  --color-label-tertiary-text: var(--color-text-light);
  --color-nav-unselected: #fff;
  --color-nav-selected-bg: #fff;
  --color-nav-selected-text: var(--color-primary-dark);
  --color-quick-reply: #00acd5;
  --color-info: #e7eaf7;
  --color-info-border: #8f9ae0;
  --color-warning: #f7efd8;
  --color-warning-border: #d9b662;
  --color-error: rgb(var(--error-rgb));
  --color-alert: rgb(var(--error-rgb));
  --color-success: #4e8563;
  --icon-color: var(--text-color);
  --icon-color-circle: rgb(240, 240, 240);
  --icon-color-circle-hover: rgba(245, 245, 245, 0.8);
  --header-bg: #fff;
  --header-text: #1a2233;
  --color-text-help: rgb(120, 120, 120);
  --color-automated: #2f9660;

  /* Shadows */
  --widget-box-shadow: rgba(-1, -1, 0, 0.1) 0px 1px 7px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --widget-box-shadow-focused: 0 0 0 3px rgba(var(--focus-rgb), 0.35),
    rgba(0, 0, 0, 0.05) 0px 3px 7px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --widget-box-shadow-focused-error: 0 0 0 3px rgba(var(--error-rgb), 0.3);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-widget: 0 3px 20px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px 0 rgba(0, 0, 0, 0.02);

  /* temba-select */
  --select-input-height: inherit;
  --temba-select-selected-font-size: 1em;
  --temba-select-selected-line-height: 1.2em;
  --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --dropdown-shadow: rgb(0 0 0 / 15%) 0px 0px 30px, rgb(0 0 0 / 12%) 0px 2px 6px;

  /* buttons */
  --button-font-size: 1.125rem;
  --button-y: 0.2em;
  --button-x: 1.5em;

  /* textinput */
  --temba-textinput-padding: 0.6em 0.8em;
  --temba-textinput-font-size: 1;

  /* charcount */
  --temba-charcount-counts-margin-top: 4px;
  --temba-charcount-summary-margin-top: 5px;
  --temba-charcount-summary-position: absolute;
  --temba-charcount-summary-right: 0px;
  --temba-charcount-summary-bottom: 0px;

  /* help-text */
  --help-text-margin-top: 0px;
  --help-text-margin-left: 0.3em;
  --help-text-size: 0.85em;

  /* Other */
  --label-size: 14px;
  --event-padding: 0.5em 1em;
  --control-margin-bottom: 15px;
  --menu-padding: 1em;
}