:root {
  /*
  |--------------------------------------------------------------------------
  | BRAND COLORS DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-color-brand-magenta: #e10880;
  --mtc-color-brand-violet: #652c90;
  --mtc-color-brand-blue: #213f99;
  --mtc-color-brand-dark: #333132;

  --mtc-color-brand-magenta-hover: #c90772;
  --mtc-color-brand-violet-hover: #552279;
  --mtc-color-brand-blue-hover: #1b347f;
  --mtc-color-brand-dark-hover: #242223;

  --mtc-color-brand-contrast: #ffffff;

  /*
  |--------------------------------------------------------------------------
  | SEMANTIC COLORS DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-color-primary: var(--mtc-color-brand-magenta);
  --mtc-color-primary-hover: var(--mtc-color-brand-magenta-hover);
  --mtc-color-primary-soft: rgba(225, 8, 128, 0.12);
  --mtc-color-primary-subtle: rgba(225, 8, 128, 0.06);

  --mtc-color-secondary: var(--mtc-color-brand-violet);
  --mtc-color-secondary-hover: var(--mtc-color-brand-violet-hover);
  --mtc-color-secondary-soft: rgba(101, 44, 144, 0.12);
  --mtc-color-secondary-subtle: rgba(101, 44, 144, 0.06);

  --mtc-color-accent: var(--mtc-color-brand-blue);
  --mtc-color-accent-hover: var(--mtc-color-brand-blue-hover);
  --mtc-color-accent-soft: rgba(33, 63, 153, 0.12);
  --mtc-color-accent-subtle: rgba(33, 63, 153, 0.06);

  --mtc-color-success: #19b36b;
  --mtc-color-success-hover: #14985b;
  --mtc-color-success-soft: rgba(25, 179, 107, 0.14);
  --mtc-color-success-subtle: rgba(25, 179, 107, 0.07);

  --mtc-color-danger: #e5484d;
  --mtc-color-danger-hover: #c9363b;
  --mtc-color-danger-soft: rgba(229, 72, 77, 0.14);
  --mtc-color-danger-subtle: rgba(229, 72, 77, 0.07);

  --mtc-color-warning: #ffb224;
  --mtc-color-warning-hover: #e39b16;
  --mtc-color-warning-soft: rgba(255, 178, 36, 0.18);
  --mtc-color-warning-subtle: rgba(255, 178, 36, 0.08);

  --mtc-color-info: var(--mtc-color-brand-blue);
  --mtc-color-info-hover: var(--mtc-color-brand-blue-hover);
  --mtc-color-info-soft: rgba(33, 63, 153, 0.14);
  --mtc-color-info-subtle: rgba(33, 63, 153, 0.07);

  --mtc-color-buy: var(--mtc-color-brand-magenta);
  --mtc-color-buy-hover: var(--mtc-color-brand-magenta-hover);
  --mtc-color-buy-soft: rgba(225, 8, 128, 0.16);
  --mtc-color-buy-subtle: rgba(225, 8, 128, 0.08);

  --mtc-color-sale: var(--mtc-color-danger);
  --mtc-color-sale-hover: var(--mtc-color-danger-hover);
  --mtc-color-sale-soft: var(--mtc-color-danger-soft);
  --mtc-color-sale-subtle: var(--mtc-color-danger-subtle);

  /*
  |--------------------------------------------------------------------------
  | SURFACES DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-color-bg: #ffffff;
  --mtc-color-bg-alt: #fafafa;

  --mtc-color-surface: #ffffff;
  --mtc-color-surface-muted: #f7f7f8;
  --mtc-color-surface-alt: #eeeeef;
  --mtc-color-surface-strong: #e5e5e8;

  --mtc-color-panel-bg: var(--mtc-color-surface);
  --mtc-color-panel-text: var(--mtc-color-text);

  --mtc-color-popup-bg: var(--mtc-color-surface);
  --mtc-color-popup-text: var(--mtc-color-text);

  --mtc-color-card-bg: var(--mtc-color-surface);
  --mtc-color-card-hover-bg: var(--mtc-color-surface-muted);

  /*
  |--------------------------------------------------------------------------
  | TEXT DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-color-text: var(--mtc-color-brand-dark);
  --mtc-color-text-soft: #5f5d5e;
  --mtc-color-text-muted: #8c8c8c;
  --mtc-color-text-disabled: #b6b6b6;
  --mtc-color-text-inverse: #ffffff;

  --mtc-color-heading: var(--mtc-color-brand-dark);
  --mtc-color-link: var(--mtc-color-primary);
  --mtc-color-link-hover: var(--mtc-color-primary-hover);

  /*
  |--------------------------------------------------------------------------
  | BORDERS / FOCUS / OVERLAYS DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-color-border: #e5e5e5;
  --mtc-color-border-subtle: rgba(51, 49, 50, 0.08);
  --mtc-color-border-strong: rgba(51, 49, 50, 0.18);

  --mtc-color-focus: var(--mtc-color-primary);
  --mtc-color-focus-soft: rgba(225, 8, 128, 0.18);

  --mtc-color-overlay: rgba(20, 18, 22, 0.48);
  --mtc-color-overlay-soft: rgba(20, 18, 22, 0.28);
  --mtc-color-overlay-strong: rgba(20, 18, 22, 0.64);

  --mtc-blur-overlay: 8px;

  /*
  |--------------------------------------------------------------------------
  | TYPOGRAPHY DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mtc-font-family-base: var(--mtc-font-family);
  --mtc-font-family-heading: "Antonio", "Satoshi", system-ui, sans-serif;
  --mtc-font-family-display: "Antonio", "Satoshi", system-ui, sans-serif;
  --mtc-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --mtc-font-size-2xs: 11px;
  --mtc-font-size-xs: 12px;
  --mtc-font-size-sm: 14px;
  --mtc-font-size-md: 16px;
  --mtc-font-size-base: 16px;
  --mtc-font-size-lg: 18px;
  --mtc-font-size-xl: 22px;
  --mtc-font-size-2xl: 32px;
  --mtc-font-size-3xl: 48px;
  --mtc-font-size-4xl: 64px;

  --mtc-font-size-fluid-sm: clamp(14px, 1.2vw, 16px);
  --mtc-font-size-fluid-md: clamp(16px, 1.5vw, 20px);
  --mtc-font-size-fluid-lg: clamp(22px, 3vw, 36px);
  --mtc-font-size-fluid-xl: clamp(36px, 6vw, 72px);

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

  --mtc-line-height-none: 1;
  --mtc-line-height-tight: 1.12;
  --mtc-line-height-snug: 1.25;
  --mtc-line-height-base: 1.55;
  --mtc-line-height-loose: 1.75;

  --mtc-letter-spacing-tight: -0.035em;
  --mtc-letter-spacing-normal: 0;
  --mtc-letter-spacing-sm: 0.01em;
  --mtc-letter-spacing-wide: 0.08em;
  --mtc-letter-spacing-display: 0.02em;

  /*
  |--------------------------------------------------------------------------
  | SPACING DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-space-0: 0;
  --mtc-space-3xs: 2px;
  --mtc-space-2xs: 4px;
  --mtc-space-xs: 8px;
  --mtc-space-sm: 12px;
  --mtc-space-md: 16px;
  --mtc-space-lg: 24px;
  --mtc-space-xl: 32px;
  --mtc-space-2xl: 48px;
  --mtc-space-3xl: 72px;
  --mtc-space-4xl: 96px;
  --mtc-space-5xl: 128px;

  --mtc-space-1: var(--mtc-space-2xs);
  --mtc-space-2: var(--mtc-space-xs);
  --mtc-space-3: var(--mtc-space-sm);
  --mtc-space-4: var(--mtc-space-md);
  --mtc-space-5: 20px;
  --mtc-space-6: var(--mtc-space-lg);
  --mtc-space-8: var(--mtc-space-xl);
  --mtc-space-10: 40px;
  --mtc-space-12: var(--mtc-space-2xl);
  --mtc-space-16: 64px;
  --mtc-space-18: var(--mtc-space-3xl);
  --mtc-space-24: var(--mtc-space-4xl);

  /*
  |--------------------------------------------------------------------------
  | RADIUS DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-radius-none: 0;
  --mtc-radius-2xs: 4px;
  --mtc-radius-xs: 6px;
  --mtc-radius-sm: 10px;
  --mtc-radius-md: 16px;
  --mtc-radius-lg: 24px;
  --mtc-radius-xl: 32px;
  --mtc-radius-2xl: 40px;
  --mtc-radius-pill: 999px;
  --mtc-radius-full: 9999px;

  /*
  |--------------------------------------------------------------------------
  | SHADOWS DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-shadow-none: none;
  --mtc-shadow-xs: 0 2px 4px rgba(20, 18, 22, 0.04);
  --mtc-shadow-sm: 0 6px 12px rgba(20, 18, 22, 0.06);
  --mtc-shadow-md: 0 12px 30px rgba(20, 18, 22, 0.08);
  --mtc-shadow-lg: 0 24px 48px rgba(20, 18, 22, 0.12);
  --mtc-shadow-xl: 0 18px 60px rgba(20, 18, 22, 0.18);
  --mtc-shadow-2xl: 0 24px 80px rgba(20, 18, 22, 0.22);

  --mtc-shadow-brand: 0 18px 60px rgba(225, 8, 128, 0.22);

  /*
  |--------------------------------------------------------------------------
  | TRANSITIONS DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-transition-fast: 0.15s ease;
  --mtc-transition-base: 0.25s ease;
  --mtc-transition-slow: 0.4s ease;
  --mtc-transition-panel: 0.28s ease;
  --mtc-transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /*
  |--------------------------------------------------------------------------
  | SIZES DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-size-icon-xs: 14px;
  --mtc-size-icon-sm: 18px;
  --mtc-size-icon-md: 24px;
  --mtc-size-icon-lg: 32px;

  --mtc-size-icon-button: 44px;
  --mtc-size-input-height: 48px;
  --mtc-size-button-height: 48px;
  --mtc-size-button-height-sm: 40px;
  --mtc-size-button-height-lg: 56px;

  /*
  |--------------------------------------------------------------------------
  | LAYOUT DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-container-width: 1280px;
  --mtc-container-narrow: 960px;
  --mtc-container-wide: 1440px;

  --mtc-container-padding: var(--mtc-space-md);
  --mtc-section-padding-y: var(--mtc-space-3xl);
  --mtc-section-padding-y-sm: var(--mtc-space-2xl);
  --mtc-section-padding-y-lg: var(--mtc-space-4xl);

  --mtc-grid-gap: var(--mtc-space-lg);
  --mtc-grid-gap-sm: var(--mtc-space-md);
  --mtc-grid-gap-lg: var(--mtc-space-xl);

  /*
  |--------------------------------------------------------------------------
  | HEADER DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-header-height: 72px;
  --mtc-header-height-mobile: 68px;
  --mtc-header-news-height: 36px;

  --mtc-header-logo-width: 150px;
  --mtc-header-logo-height: 120px;
  --mtc-header-logo-width-mobile: 112px;
  --mtc-header-logo-height-mobile: 88px;

  --mtc-color-header-bg: var(--mtc-color-surface);
  --mtc-color-header-text: var(--mtc-color-text);
  --mtc-color-header-border: var(--mtc-color-border-subtle);

  --mtc-color-header-icon: var(--mtc-color-text);
  --mtc-color-header-icon-hover-bg: var(--mtc-color-primary-soft);

  --mtc-color-header-link: var(--mtc-color-text);
  --mtc-color-header-link-hover: var(--mtc-color-primary);

  --mtc-color-header-brand-bg: var(--mtc-gradient-brand);
  --mtc-color-header-brand-text: var(--mtc-color-text-inverse);

  --mtc-color-header-news-bg: var(--mtc-color-brand-dark);
  --mtc-color-header-news-text: var(--mtc-color-text-inverse);

  /*
  |--------------------------------------------------------------------------
  | BUTTONS / FORMS DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-color-button-primary-bg: var(--mtc-color-primary);
  --mtc-color-button-primary-bg-hover: var(--mtc-color-primary-hover);
  --mtc-color-button-primary-text: var(--mtc-color-text-inverse);

  --mtc-color-button-secondary-bg: var(--mtc-color-secondary);
  --mtc-color-button-secondary-bg-hover: var(--mtc-color-secondary-hover);
  --mtc-color-button-secondary-text: var(--mtc-color-text-inverse);

  --mtc-color-button-accent-bg: var(--mtc-color-accent);
  --mtc-color-button-accent-bg-hover: var(--mtc-color-accent-hover);
  --mtc-color-button-accent-text: var(--mtc-color-text-inverse);

  --mtc-color-input-bg: var(--mtc-color-surface);
  --mtc-color-input-text: var(--mtc-color-text);
  --mtc-color-input-placeholder: var(--mtc-color-text-muted);
  --mtc-color-input-border: var(--mtc-color-border);
  --mtc-color-input-focus-border: var(--mtc-color-primary);
  --mtc-color-input-focus-bg: var(--mtc-color-surface);

  /*
  |--------------------------------------------------------------------------
  | COMPONENTS / Z-INDEX DEFAULT
  |--------------------------------------------------------------------------
  */

  --mtc-offcanvas-width: 420px;
  --mtc-popup-width: 560px;
  --mtc-popup-padding: var(--mtc-space-xl);
  --mtc-popup-radius: var(--mtc-radius-lg);

  --mtc-color-badge-bg: var(--mtc-color-primary-soft);
  --mtc-color-badge-text: var(--mtc-color-primary);

  --mtc-color-chip-bg: var(--mtc-color-surface-muted);
  --mtc-color-chip-text: var(--mtc-color-text);

  --mtc-color-skeleton: #dddddf;
  --mtc-color-divider: var(--mtc-color-border-subtle);

  --mtc-z-base: 1;
  --mtc-z-dropdown: 100;
  --mtc-z-sticky: 200;
  --mtc-z-header: 800;
  --mtc-z-overlay: 900;
  --mtc-z-offcanvas: 950;
  --mtc-z-modal: 1000;
  --mtc-z-popup: 1000;
  --mtc-z-toast: 1100;
  --mtc-z-tooltip: 1200;
}