: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;
}