:root {
  /* ==========================================================================
     Color palette.
     ========================================================================== */
  --color-black: #000;
  --color-white: #fff;

  /* Gray variations.
     ========================================================================== */
  --color-gray-900: #222330;
  --color-gray-600: #484848;
  --color-gray-500: #656A6E;
  --color-gray-400: #8e929c;
  --color-gray-300: #969CA1;
  --color-gray-200: #c3c3c3;
  --color-gray-100: #EEEEEE;
  --color-gray-050: #F6F6F6;

  /* Text.
     ========================================================================== */
  --color-heading: var(--color-fg-primary);
  --color-text: var(--color-gray-500);
  --color-text-light: var(--color-gray-300);
  --color-text-dark: var(--color-gray-900);
  --color-link: var(--color-fg-primary);
  --color-link-hover: var(--color-primary-700);

  /* Notice.
     ========================================================================== */
  --color-fg-status: #5bc0de;
  --color-bg-status: #e5edff;
  --color-fg-success: #5cb85c;
  --color-bg-success: #ECFDF3;
  --color-fg-warning: #f0ad4e;
  --color-bg-warning: #FFFAEB;
  --color-fg-error: #d9534f;
  --color-bg-error: #fdf5f5;

  /* Main colors.
   ========================================================================== */
  --color-primary-700: color-mix(in oklab, var(--color-primary) 95%, black);
  --color-primary-500: var(--color-primary);
  --color-primary-200: color-mix(in oklab, var(--color-primary) 10%, white);

  --color-fg: var(--color-text);
  --color-fg-primary: var(--color-primary-500);

  --color-bg: var(--color-white);
  --color-bg-primary: var(--color-primary-200);
  --color-bg-secondary: var(--color-gray-050);

  --color-border: var(--color-gray-400);

  /* ==========================================================================
     Base.
     ========================================================================== */
  --border-radius-xxl: 50px;
  --border-radius-xl: 25px;
  --border-radius-l: 10px;
  --border-radius-m: 5px;
  --border-radius-s: 2px;

  --box-shadow-xl: 0 20px 35px 0 #00000026;
  --box-shadow-m: 0 7px 7px 0 #8F909238;
  --box-shadow-s: 0 5px 10px rgba(0, 0, 0, .1);

  --transition: .2s;

  /* ==========================================================================
     Screens.
     ========================================================================== */
  --screen-xs: 460px;
  --screen-s: 768px;
  --screen-m: 908px;
  --screen-l: 1920px;

  /* ==========================================================================
     Grid.
     ========================================================================== */
  --gutter-xl: 40px;
  --gutter-l: 24px;
  --gutter-m: 20px;
  --gutter-s: 16px;
  --gutter-xs: 10px;

  /* ==========================================================================
     Typography.
     ========================================================================== */
  --font-family: "Merriweather Regular", "Helvetica", Arial, sans-serif;
  --font-family-heading: "Merriweather Bold", var(--font-family);
  --font-family-secondary: "Source Sans Pro Regular", var(--font-family);
  --font-family-secondary-medium: "Source Sans Pro Semibold", var(--font-family-secondary);
  --font-family-secondary-heading: "Source Sans Pro Bold", var(--font-family-secondary);
  --line-height: 1.4;
  --line-height-heading: 1.2;

  --font-size-xxl: 1.625rem; /* 26px */
  --font-size-xl: 1.125rem; /* 18px */
  --font-size-l: 1rem; /* 16px */
  --font-size-m: .875rem; /* 14px */
  --font-size-s: .75rem; /* 12px */
  --font-size-xs: .5rem; /* 11px */

  --font-size-h1: 2rem; /* 32px */
  --font-size-h2: 1.125rem; /* 18px */
  --font-size-h3: 1rem; /* 16px */
  --font-size-h4: .875rem; /* 14px */

  /* ==========================================================================
     Spaces.
     ========================================================================== */
  --space-xxl: 3rem; /* 48px */
  --space-xl: 2rem; /* 32px */
  --space-l: 1.5rem; /* 24px */
  --space-m: 1rem; /* 16px */
  --space-s: .75rem; /* 12px */
  --space-xs: .5rem; /* 8px */
  --space-xxs: .25rem; /* 4px */

  /* ==========================================================================
     Buttons.
     ========================================================================== */
  --button-fg-color: var(--color-text);
  --button-bg-color: transparent;
  --button-font-size: var(--font-size-m);
  --button-border-size: 1px;
  --button-border-color: var(--color-text);
  --button-border-radius: var(--border-radius-m);
  --button-height: 40px;
  --button-line-height: 1.5;
  --button-padding-horizontal: 30px;
  --button-padding-vertical: 12px;
  --button-transition: .2s;

  /* ==========================================================================
     Inputs.
     ========================================================================== */
  --input-fg-color: var(--color-text-dark);
  --input-bg-color: var(--color-white);
  --input-font-size: var(--font-size-m);
  --input-color-description: var(--color-gray-500);
  --input-color-placeholder: var(--color-gray-500);
  --input-border-size: 1px;
  --input-border-color: var(--color-border);
  --input-border-radius: var(--border-radius-s);
  --input-height: 42px;
  --input-padding-horizontal: calc(var(--space-l) - var(--input-border-size));
  --input-padding-vertical: calc(var(--space-m) - var(--input-border-size));
  --input-transition: var(--transition);

  /* ==========================================================================
     Icons.
     ========================================================================== */
  --icon-size-xxs: 14px;
  --icon-size-xs: 16px;
  --icon-size-s: 20px;
  --icon-size-m: 24px;
  --icon-size-l: 28px;
  --icon-size-xl: 32px;

  /* ==========================================================================
     Theme.
     ========================================================================== */
  --header-height: 91px;
  --sidebar-width: 72px;
  --sidebar-width-open: 192px;
  --menu-push-width-open: 280px;
  --layout-builder-sidebar-width: 300px;
  --sticky-event-height: 36px;

  /* ==========================================================================
     Print.
     ========================================================================== */
  --print-page-margin: 10mm;
  --print-page-width: 210mm;
  --print-page-height: 297mm;
}