Hopper

:root {
  --color-dominant: #4c9cd4;
  --color-surface: #223152;
  --color-ink: #b9d4ee;
  --color-accent: #6793a7;
  --color-detail: #b0bacd;
}

/* CSS variables exposed by source */
:root {
  --border: oklch(92.2% 0 0);
  --color-accent-contrast: #fff;
  --color-gray-05: #f5f5f5;
  --color-green-05: #e4f6da;
  --primary-foreground: oklch(98.5% 0 0);
  --color-surface-accent-active: #383838;
  --color-warning-contrast: #fff;
  --color-orange-50: #c45000;
  --color-surface-raised-active: #d9d9d9;
  --color-red-60: #a7061d;
  --color-surface-contrast-active: #e7e7e7;
  --radius-none: 0;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-surface-raised-resting: #f5f5f5;
  --color-primary-foreground: oklch(98.5% 0 0);
  --color-surface-accent-tint-resting: #f5f5f5;
  --color-surface-primary-active: #0e4799;
  --color-blue-10: #c0e8ff;
  --color-green-70: #085e22;
  --spacing-200: 1rem;
  --color-gray-80: #383838;
  --color-white: #fff;
  --color-program-pro-border: linear-gradient(135deg,#ff7900 0%,#ff3633 32.16%,#964dff 66.2%,#00abe5 100%);
  --color-gray-20: #d9d9d9;
  --color-popover: oklch(100% 0 0);
  --text-9: 32px;
  --radius-sm: 4px;
  --color-coral-50: #f05754;
  --color-gray-30: #c3c3c3;
  --color-discount: #1c7933;
  --spacing-250: 1.25rem;
  --color-text-contrast-secondary: #ffffffb3;
  --color-accent: oklch(97% 0 0);
  --font-weight-bold: 700;
  --spacing-container-padding: 2rem;
  --spacing-300: 1.5rem;
  --color-gray-100: #111;
  --color-surface-accent-resting: #111;
  --color-input: oklch(92.2% 0 0);
  --font-weight-regular: 400;
  --text-7--line-height: calc(32 / 24);
  --spacing-600: 3rem;
  --spacing-450: 2.25rem;
  --spacing-1000: 5rem;
  --color-surface-primary-tint-resting: #e7f8ff;
  --text-6--line-height: calc(28 / 20);
  --color-surface-raised-hover: #e7e7e7;
  --color-calendar-average: #744701;
  --color-tertiary: #aaa;
  --radius-2xl: 24px;
  --color-success-contrast: #fff;
  --radius-md: 8px;
  --radius-lg: 12px;
  --color-blue-100: #021130;
  --color-gray-10: #e7e7e7;
  --text-4: 16px;
  --accent: oklch(97% 0 0);
  --color-orange-05: #ffe9d5;
  --color-strikethrough: #f05754;
  --text-15--line-height: calc(68 / 62);
}