:root {
  --base-size: 8px;

--font-family: 'SF Pro Display', 'SF Pro', system-ui, -apple-system,
  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
  'Open Sans', 'Helvetica Neue', sans-serif;
--font-family-mono: SFMono-Medium, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono',
  'Ubuntu Mono', Menlo, Consolas, Courier, monospaceSFMono-Medium, SF Mono,
  Segoe UI Mono, Roboto Mono, Ubuntu Mono, Menlo, Consolas, Courier, monospace;
--font-family-serif: Source Code Pro;

--text-mono: 400 12px/1 'Source Code Pro';
--body-regular: 400 13px/16 'SF Pro Display';
--body-emphasized: 600 13px/16 'SF Pro Display';
--headline-regular: 700 13px/16 'SF Pro Display';
--headline-emphasized: 900 13px/16 'SF Pro Display';
--title-1-regular: 400 22px/26 'SF Pro Display';
--title-1-emphasized: 700 22px/26 'SF Pro Display';
--title-2-regular: 400 17px/22 'SF Pro Display';
--title-2-emphasized: 700 17px/22 'SF Pro Display';
--title-3-regular: 400 15px/20 'SF Pro Display';
--title-3-emphasized: 600 15px/20 'SF Pro Display';
--title-large-regular: 400 26px/35 'SF Pro Display';
--title-large-emphasized: 700 26px/35 'SF Pro Display';
--callout-regular: 400 12px/15 'SF Pro Display';
--callout-emphasizde: 600 12px/15 'SF Pro Display';
--subheading-regular: 400 11px/14 'SF Pro Display';
--subheading-emphasized: 600 11px/14 'SF Pro Display';
--footnote-regular: 400 10px/13 'SF Pro Display';
--footnote-emphasized: 600 10px/13 'SF Pro Display';
--caption-regular: 400 10px/13 'SF Pro Display';
--caption-emphasized: 500 10px/13 'SF Pro Display';

--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-weight-semibold: 600;
--font-weight-heavy: 900;

--radius-m: 8px;
--radius-l: 12px;
--radius-full: 100px;
--radius-s: 4px;

--spacing-tiny: 2px;
--spacing-xxs: 4px;
--spacing-xs: 8px;
--spacing-s: 12px;
--spacing-m: 16px;
--spacing-l: 20px;
--spacing-xl: 24px;
--spacing-xxl: 40px;

--size-tiny: 2px;
--size-xxs: 4px;
--size-xs: 8px;
--size-s: 12px;
--size-m: 16px;
--size-l: 20px;
--size-xl: 24px;
--size-xxl: 40px;

--color-brand-default: #fe7a00;
--color-brand-dark: #e16d01;

--color-primary-default: #111111;
--color-primary-light: #333333;
--color-primary-weak: #d9e4ff;

--color-base-0: #ffffff;
--color-base-100: #f9fafb;
--color-base-200: #f3f4f6;
--color-base-300: #e5e7eb;
--color-base-400: #d1d5db;
--color-base-500: #9ca3af;
--color-base-600: #6b7280;
--color-base-700: #4b5563;
--color-base-800: #374151;
--color-base-900: #1f2937;
--color-base-1000: #111827;

--color-background-01: #ffffff;
--color-background-02: #f9fafb;
--color-background-03: #e5e7eb;
--color-background-04: #111827;
--color-background-warning: #fffaf1;
--color-background-error: #ffe2e2;
--color-background-info: #ebf5ff;

--color-error-default: #ff3471;
--color-error-intense: #e52c64;
--color-success-default: #23cc5a;
--color-info-default: #33b5e5;
--color-warning-default: #ffbb33;

--color-text-01: #ffffff;
--color-text-02: #d1d5db;
--color-text-03: #9ca3af;
--color-text-04: #6b7280;
--color-text-05: #111827;
--color-text-warning: #9b6a08;
--color-text-error: #690221;
--color-text-info: #0068d6;

--color-border-default: #e5e7eb;
--color-border-medium: #9ca3af;
--color-border-strong: #111827;
--color-border-error: #ff3471;
--color-border-warning: #ffbb33;
--color-border-info: #cce6ff;
--color-border-empty: #ffffff;
--color-border-brand: #111111;
--color-border-sucess: #23cc5a;
--color-border-focus: #389aff;

--shadow-low: 0 1px 2px 0 #f9fafb;
--shadow-normal: 0 1px 3px 0 #e5e7eb;
--shadow-medium: 0px 2px 4px -1px rgba(15, 23, 42, 0.06),
  0px 4px 6px -1px rgba(15, 23, 42, 0.1);
--shadow-high: 0px 4px 6px -2px rgba(15, 23, 42, 0.05),
  0px 10px 15px -3px rgba(15, 23, 42, 0.1);
--shadow-max: 0px 10px 10px -5px rgba(15, 23, 42, 0.04),
  0px 20px 25px -5px rgba(15, 23, 42, 0.1);

--color-button-brand-default: #f68d2e;
--color-button-brand-hover: #cd7324;
--color-button-primary-default: #111111;
--color-button-primary-hover: #333333;
--color-button-secondary-default: #ffffff;
--color-button-disabled: #e5e7eb;

--color-display-default-background: var(--color-base-200);
--color-display-default-text: var(--color-text-05);
--color-display-black-background: var(--color-base-1000);
--color-display-black-text: var(--color-text-01);
--color-display-green-background: #a7f0ba;
--color-display-green-text: #0e6027;
--color-display-red-background: #f9d8da;
--color-display-red-text: #6b1a18;
--color-display-magenta-background: #ffd6e8;
--color-display-magenta-text: #93154c;
--color-display-purple-background: #e8daff;
--color-display-purple-text: #6929c4;
--color-display-blue-background: #d3e1fc;
--color-display-blue-text: #0f2c96;

--toolbar-height: 50px;
}