/*
 * @file
 * Misc variables.
 */

:root {
  --radius-sm: var(--theme-setting-radius-sm, 4px);
  --radius-md: var(--theme-setting-radius-md, 16px);
  --radius-lg: var(--theme-setting-radius-lg, 40px);
  --radius-xl: 30px;
  --radius-button: var(--theme-setting-radius-button, 6px);
  --focus-ring-width: 3px;
  --focus-ring-style: dotted;

  /* Box shadows. */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 24px 0 rgba(0, 0, 0, 0.12);
  --shadow-button: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
  --shadow-button-hover: 0 6px 12px 0 rgba(0, 0, 0, 0.3);
  --shadow-button-active: 0 1px 3px 0 rgba(0, 0, 0, 0.2);

  --desktop-width: 1440px;
  --tablet-width: 768px;
  --mobile-width: 520px;
}