:root {
  color-scheme: light;

  --color-white: #ffffff;
  --color-black: #101828;
  --color-graphite-900: #242429;
  --color-gray-900: #2f2f37;
  --color-gray-800: #3b3b44;
  --color-gray-750: #474752;
  --color-gray-700: #53535f;
  --color-graphite-650: #5f5f6d;
  --color-graphite-600: #777788;
  --color-graphite-500: #8f8fa3;
  --color-graphite-300: #c4c4d4;
  --color-graphite-250: #d1d1e0;
  --color-graphite-200: #e0e0eb;
  --color-purple-50: #f2e6fe;
  --color-purple-100: #f2e6fe;
  --color-purple-200: #e2cffc;
  --color-purple-300: #c3a6ff;
  --color-purple-400: #aa80ff;
  --color-purple-450: #9855f6;
  --color-purple-500: #7f30e3;
  --color-purple-600: #7021d4;
  --color-purple-700: #6117be;
  --color-red-500: #fa2b55;
  --color-red-400: #ff4760;
  --color-red-100: #feeaee;
  --color-red-200: #ffdce3;
  --color-red-250: #ffc9d3;
  --color-red-600: #f90637;
  --color-red-700: #e00532;
  --color-orange-500: #ff8533;
  --color-orange-350: #ff973c;
  --color-orange-100: #fff2ea;
  --color-orange-200: #ffe7d8;
  --color-orange-250: #ffd9c0;
  --color-orange-600: #ff761a;
  --color-orange-700: #ff6700;
  --color-green-50: #e4f8ee;
  --color-green-100: #e4f8ee;
  --color-green-200: #d4f4e4;
  --color-green-250: #bff0d6;
  --color-green-300: #28f094;
  --color-green-400: #1dcb74;
  --color-green-500: #1daf66;
  --color-green-600: #199959;
  --color-green-700: #16844d;
  --color-blackberry-background-100: #f2e6fe;
  --color-blackberry-background-200: #e7d2ff;
  --color-blackberry-background-250: #dbbeff;
  --color-mint-100: #d8fbfd;
  --color-mint-200: #c5f6f9;
  --color-mint-250: #aeeef3;
  --color-mint-500: #059dae;
  --color-mint-600: #048b9b;
  --color-mint-700: #037988;
  --color-sky-100: #d8f2fd;
  --color-sky-200: #c4eafe;
  --color-sky-250: #aedffd;
  --color-sky-500: #0088c2;
  --color-sky-600: #0078ad;
  --color-sky-700: #006999;
  --color-river-100: #d1ecff;
  --color-river-200: #bfe3ff;
  --color-river-250: #a8d7ff;
  --color-river-500: #0098fe;
  --color-river-600: #0089e5;
  --color-river-700: #007acc;
  --color-lavender-100: #efecff;
  --color-lavender-200: #e4deff;
  --color-lavender-250: #d7ceff;
  --color-lavender-500: #7158fe;
  --color-lavender-600: #6247f0;
  --color-lavender-700: #5538de;
  --color-raspberry-100: #fce8f3;
  --color-raspberry-200: #f9dcec;
  --color-raspberry-250: #f5cce2;
  --color-raspberry-500: #dc1984;
  --color-raspberry-600: #c91475;
  --color-raspberry-700: #b10f66;
  --color-neutral-100: #f6f6f9;
  --color-neutral-600: #5f5f6d;
  --color-slate-950: #132033;
  --color-slate-900: #1e293b;
  --color-slate-800: #334155;
  --color-slate-700: #475569;
  --color-slate-500: #64748b;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50: #f8fafc;
  --color-blue-700: #1d4ed8;
  --color-blue-600: #2563eb;
  --color-blue-500: #3b82f6;
  --color-amber-500: #f59e0b;
  --space-0: 0;
  --space-50: 0.125rem;
  --space-0-5: 0.125rem;
  --space-100: 0.25rem;
  --space-1: 0.25rem;
  --space-150: 0.375rem;
  --space-200: 0.5rem;
  --space-2: 0.5rem;
  --space-250: 0.625rem;
  --space-300: 0.75rem;
  --space-3: 0.75rem;
  --space-400: 1rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-500: 1.25rem;
  --space-600: 1.5rem;
  --space-6: 1.5rem;
  --space-700: 1.75rem;
  --space-800: 2rem;
  --space-8: 2rem;
  --space-900: 2.25rem;
  --space-1000: 2.5rem;
  --space-1100: 2.75rem;
  --space-1200: 3rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --layout-container-max-inline-size-xs: 840px;
  --layout-container-max-inline-size-s: 1080px;
  --layout-container-max-inline-size-m: 1440px;
  --layout-container-max-inline-size-l: 2200px;
  --layout-container-max-inline-size-xl: none;

  --stroke-100: 1px;
  --stroke-200: 2px;
  --stroke-300: 3px;
  --stroke-400: 4px;
  --stroke-500: 5px;
  --stroke-600: 6px;
  --stroke-700: 7px;
  --stroke-800: 8px;

  --radius-xxs: 0.25rem;
  --radius-xs: 0.375rem;
  --radius-nano: 0.125rem;
  --radius-s: 0.5rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-m: 0.75rem;
  --radius-l: 1rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-xxl: 6.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 16px 32px rgba(15, 23, 42, 0.08);
  --shadow-tooltip:
    0 3px 6px rgba(0, 0, 0, 0.05), 0 11px 11px rgba(0, 0, 0, 0.04), 0 25px 15px rgba(0, 0, 0, 0.03);

  --font-family-sans: 'Google Sans';
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;
  --font-size-18: 1.125rem;
  --font-size-19: 1.1875rem;
  --font-size-24: 1.5rem;
  --font-size-32: 2rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-550: 550;
  --font-weight-semibold: 600;
  --font-weight-650: 650;
  --font-weight-bold: 700;
  --font-weight-720: 700;
  --letter-spacing-sidebar: -0.01875rem;
  --line-height-tight: 1.1;
  --line-height-compact: 1.3;
  --line-height-14: 0.875rem;
  --line-height-16: 1rem;
  --line-height-17: 1.0625rem;
  --line-height-18: 1.125rem;
  --line-height-20: 1.25rem;
  --line-height-22: 1.375rem;
  --line-height-26: 1.625rem;
  --line-height-30: 1.875rem;
  --line-height-base: 1.5;

  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 300ms;
  --duration-toast-dismiss: 200ms;
  --ease-out: ease-out;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  --color-text-primary: var(--color-graphite-900);
  --color-text-icon-primary: var(--color-graphite-900);
  --color-text-secondary: var(--color-graphite-500);
  --color-text-muted: var(--color-slate-500);
  --color-text-inverse: var(--color-white);
  --color-text-icon-primary-inverted: var(--color-white);
  --color-text-icon-white-constant: var(--color-white);
  --color-text-icon-black-contrast: var(--color-graphite-900);
  --color-text-icon-accent: var(--color-purple-500);
  --color-text-icon-accent-inverted: var(--color-purple-300);
  --color-text-icon-secondary: var(--color-graphite-500);
  --color-text-icon-primary-gray: var(--color-graphite-650);
  --color-text-icon-muted-secondary: #808093;
  --color-text-icon-tertiary: var(--color-graphite-300);
  --color-text-icon-success: var(--color-green-500);
  --color-text-icon-success-inverted: var(--color-green-400);
  --color-text-icon-warning: var(--color-orange-500);
  --color-text-icon-warning-inverted: var(--color-orange-350);
  --color-text-icon-danger: var(--color-red-500);
  --color-text-icon-danger-inverted: var(--color-red-400);
  --color-background-level-1: var(--color-neutral-100);
  --color-background-level-1-base: var(--color-white);
  --color-background-level-1-base-inverted: #18181b;
  --color-background-level-2: var(--color-neutral-100);
  --color-background-field: var(--color-white);
  --color-background-toast: #18181b;
  --color-background-tooltip: rgba(24, 24, 27, 0.9);
  --color-background-dropdown: var(--color-white);
  --color-background-dropdown-hover: var(--color-neutral-100);
  --color-background-dropdown-active: #f0f0f5;
  --color-background-accent: var(--color-purple-500);
  --color-background-accent-secondary: var(--color-purple-50);
  --color-background-accent-secondary-hover: #edd8ff;
  --color-background-accent-secondary-pressed: var(--color-purple-200);
  --color-surface-canvas: #eef4f8;
  --color-surface-panel: rgba(255, 255, 255, 0.92);
  --color-surface-muted: var(--color-slate-50);
  --color-surface-level-1: var(--color-neutral-100);
  --color-surface-accent: #dbeafe;
  --color-surface-accent-secondary: var(--color-purple-50);
  --color-surface-tooltip: #18181b;
  --color-surface-sidebar: var(--color-white);
  --color-border-subtle: rgba(148, 163, 184, 0.32);
  --color-border-strong: rgba(71, 85, 105, 0.44);
  --color-border-divider: var(--color-graphite-200);
  --color-overlay-modal: rgba(0, 0, 0, 0.5);
  --color-action-primary: var(--color-blue-600);
  --color-action-primary-hover: var(--color-blue-700);
  --color-action-secondary: var(--color-slate-900);
  --color-action-accent: var(--color-purple-500);
  --color-action-accent-hover: var(--color-purple-600);
  --color-action-disabled: var(--color-graphite-300);
  --color-button-primary-background-default: var(--color-purple-500);
  --color-button-primary-background-hover: var(--color-purple-600);
  --color-button-primary-background-pressed: var(--color-purple-700);
  --color-button-primary-background-disabled: var(--color-neutral-100);
  --color-button-secondary-background-default: var(--color-neutral-100);
  --color-button-secondary-background-hover: var(--color-graphite-200);
  --color-button-secondary-background-pressed: var(--color-graphite-250);
  --color-button-secondary-background-disabled: var(--color-neutral-100);
  --color-button-danger-background-default: var(--color-red-500);
  --color-button-danger-background-hover: var(--color-red-600);
  --color-button-danger-background-pressed: var(--color-red-700);
  --color-button-danger-background-disabled: var(--color-neutral-100);
  --color-button-flat-primary-default: var(--color-purple-500);
  --color-button-flat-primary-hover: var(--color-purple-450);
  --color-button-flat-primary-pressed: var(--color-purple-400);
  --color-button-flat-primary-disabled: var(--color-graphite-300);
  --color-button-flat-secondary-default: var(--color-graphite-500);
  --color-button-flat-secondary-hover: var(--color-graphite-600);
  --color-button-flat-secondary-pressed: var(--color-graphite-650);
  --color-button-flat-secondary-disabled: var(--color-graphite-300);
  --color-button-flat-success-default: var(--color-green-500);
  --color-button-flat-success-hover: var(--color-green-600);
  --color-button-flat-success-pressed: var(--color-green-700);
  --color-button-flat-warning-default: var(--color-orange-500);
  --color-button-flat-warning-hover: var(--color-orange-600);
  --color-button-flat-warning-pressed: var(--color-orange-700);
  --color-button-flat-danger-default: var(--color-red-500);
  --color-button-flat-danger-hover: var(--color-red-600);
  --color-button-flat-danger-pressed: var(--color-red-700);
  --color-button-inverted-background-default: var(--color-gray-900);
  --color-button-inverted-background-hover: var(--color-gray-800);
  --color-button-inverted-background-pressed: var(--color-gray-750);
  --color-button-inverted-background-disabled: var(--color-gray-900);
  --color-button-inverted-text: var(--color-purple-300);
  --color-button-inverted-text-disabled: var(--color-gray-700);
  --color-content-red: var(--color-red-500);
  --color-content-green: var(--color-green-500);
  --color-content-orange: var(--color-orange-500);
  --color-content-blackberry: var(--color-purple-500);
  --color-content-background-red: var(--color-red-100);
  --color-content-background-red-hover: var(--color-red-200);
  --color-content-background-red-pressed: var(--color-red-250);
  --color-content-background-orange: var(--color-orange-100);
  --color-content-background-orange-hover: var(--color-orange-200);
  --color-content-background-orange-pressed: var(--color-orange-250);
  --color-content-background-green: var(--color-green-100);
  --color-content-background-green-hover: var(--color-green-200);
  --color-content-background-green-pressed: var(--color-green-250);
  --color-content-background-blackberry: var(--color-blackberry-background-100);
  --color-content-background-blackberry-hover: var(--color-blackberry-background-200);
  --color-content-background-blackberry-pressed: var(--color-blackberry-background-250);
  --color-content-mint: var(--color-mint-500);
  --color-content-mint-hover: var(--color-mint-600);
  --color-content-mint-pressed: var(--color-mint-700);
  --color-content-sky: var(--color-sky-500);
  --color-content-sky-hover: var(--color-sky-600);
  --color-content-sky-pressed: var(--color-sky-700);
  --color-content-river: var(--color-river-500);
  --color-content-river-hover: var(--color-river-600);
  --color-content-river-pressed: var(--color-river-700);
  --color-content-lavender: var(--color-lavender-500);
  --color-content-lavender-hover: var(--color-lavender-600);
  --color-content-lavender-pressed: var(--color-lavender-700);
  --color-content-raspberry: var(--color-raspberry-500);
  --color-content-raspberry-hover: var(--color-raspberry-600);
  --color-content-raspberry-pressed: var(--color-raspberry-700);
  --color-content-background-mint: var(--color-mint-100);
  --color-content-background-mint-hover: var(--color-mint-200);
  --color-content-background-mint-pressed: var(--color-mint-250);
  --color-content-background-sky: var(--color-sky-100);
  --color-content-background-sky-hover: var(--color-sky-200);
  --color-content-background-sky-pressed: var(--color-sky-250);
  --color-content-background-river: var(--color-river-100);
  --color-content-background-river-hover: var(--color-river-200);
  --color-content-background-river-pressed: var(--color-river-250);
  --color-content-background-lavender: var(--color-lavender-100);
  --color-content-background-lavender-hover: var(--color-lavender-200);
  --color-content-background-lavender-pressed: var(--color-lavender-250);
  --color-content-background-raspberry: var(--color-raspberry-100);
  --color-content-background-raspberry-hover: var(--color-raspberry-200);
  --color-content-background-raspberry-pressed: var(--color-raspberry-250);
  --color-content-no-filled: var(--color-graphite-200);
  --color-notification-neutral: var(--color-neutral-100);
  --color-notification-accent: var(--color-purple-500);
  --color-notification-accent-secondary: var(--color-purple-100);
  --color-notification-success: var(--color-green-500);
  --color-notification-success-secondary: var(--color-green-100);
  --color-notification-warning: var(--color-orange-500);
  --color-notification-warning-secondary: var(--color-orange-100);
  --color-notification-danger: var(--color-red-500);
  --color-notification-danger-secondary: var(--color-red-100);
  --color-stroke-accent: var(--color-purple-500);
  --color-stroke-secondary: var(--color-graphite-200);
  --color-stroke-secondary-inverted: var(--color-gray-900);
  --color-stroke-warning: var(--color-orange-500);
  --color-stroke-white-contrast: var(--color-white);
  --color-stroke-danger: var(--color-red-500);
  --color-stroke-focused: var(--color-purple-50);
  --shadow-default: 0 4px 24px 0 #0000001f;
  --shadow-dropdown: 0 3px 6px 0 #0000000d, 0 11px 11px 0 #0000000a, 0 25px 15px 0 #00000008;
  --shadow-notification: 0 8px 16px 0 #33333333;
  --shadow-segment-control: 0 4px 24px 0 #00000012;
  --color-warning-accent: var(--color-orange-500);
  --color-success-accent: var(--color-green-500);
  --color-success-surface: var(--color-green-50);
  --color-icon-muted: var(--color-graphite-300);
  --color-danger: var(--color-red-600);
  --color-success: var(--color-green-600);
  --color-warning: var(--color-amber-500);
  --typography-body-accent-buffalo: var(--font-weight-medium) var(--font-size-15) /
    var(--line-height-20) var(--font-family-sans);
  --typography-body-horse: var(--font-weight-regular) var(--font-size-15) / var(--line-height-20)
    var(--font-family-sans);
  --typography-caption-regular-kitten: var(--font-weight-regular) var(--font-size-11) /
    var(--line-height-14) var(--font-family-sans);
  --typography-description-puma: var(--font-weight-regular) var(--font-size-13) /
    var(--line-height-16) var(--font-family-sans);
  --typography-description-relaxed-puma: var(--font-weight-regular) var(--font-size-13) /
    var(--line-height-17) var(--font-family-sans);
  --typography-description-accent-lion: var(--font-weight-medium) var(--font-size-13) /
    var(--line-height-16) var(--font-family-sans);
  --typography-sidebar-default: var(--font-weight-regular) var(--font-size-14) /
    var(--line-height-20) var(--font-family-sans);
  --typography-sidebar-accent: var(--font-weight-medium) var(--font-size-14) / var(--line-height-20)
    var(--font-family-sans);
  --typography-action-capybara: var(--font-weight-regular) var(--font-size-17) /
    var(--line-height-20) var(--font-family-sans);
  --typography-action-accent-minipig: var(--font-weight-medium) var(--font-size-17) /
    var(--line-height-20) var(--font-family-sans);
  --typography-title-2-pig: var(--font-weight-650) var(--font-size-19) / var(--line-height-22)
    var(--font-family-sans);
  --typography-title-3-bear: var(--font-weight-bold) var(--font-size-17) / var(--line-height-20)
    var(--font-family-sans);
  --typography-title-4-crocodile: var(--font-weight-bold) var(--font-size-15) /
    var(--line-height-18) var(--font-family-sans);
  --typography-paragraph-deer: var(--font-weight-regular) var(--font-size-15) /
    var(--line-height-22) var(--font-family-sans);
  --typography-title-1-elephant: var(--font-weight-bold) var(--font-size-24) / var(--line-height-26)
    var(--font-family-sans);
  --typography-title-1-elephant-code: var(--font-weight-720) var(--font-size-24) /
    var(--line-height-30) var(--font-family-sans);
}