/**
 * Design tokens from Figma UI KIT (Internal Canvas + Styles + Components)
 * Source: figma-export/ui-kit.json
 */
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-almost-black: #0e0e0e;
  --color-text: #333333;
  --color-text-muted: #828282;
  --color-text-active: #384048;
  --color-border: #dddddd;
  --color-bg-gray: #f5f5f5;
  --glass-bg: rgba(245, 245, 245, 0.75);
  --glass-bg-white: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 4px 24px rgba(14, 14, 14, 0.06);
  --color-bg-gray-alt: #e2e7ed;
  --color-bg-soft: #fff7f8;
  --color-surface: #f1f1f1;

  --color-primary: #c71585;
  --color-primary-hover: #A90067;
  --color-primary-pressed: #e533a3;
  --color-primary-alt: #e533a3;
  --gradient-primary: linear-gradient(90deg, #a90067 0%, #e533a3 100%);
  --color-accent-red: #ed1c24;
  --color-promotion-bg: #fb8b9a;

  --color-error: #db371f;
  /* Success — not used on inputs; inputs use primary magenta for focus/active */
  --color-success: #219653;
  --color-success-alt: #50b524;
  --color-tab-active: #3174e8;
  --color-tertiary-hover: #7d12e1;
  --color-tertiary-pressed: #b94eff;
  --color-icon: #1c1b1f;

  /* Typography */
  --font-body: "Roboto", Arial, sans-serif;
  --font-display: Arial, sans-serif;
  --font-logo: "Comfortaa", cursive;

  --text-desktop-h1-size: 62px;
  --text-desktop-h2-size: 40px;
  --text-desktop-h3-size: 32px;
  --text-desktop-h4-size: 24px;
  --text-desktop-h5-size: 20px;
  --text-desktop-body-size: 16px;
  --text-desktop-caption-size: 14px;
  --text-desktop-xs-size: 12px;

  --text-mobile-h1-size: 40px;
  --text-mobile-h2-size: 32px;
  --text-mobile-h3-size: 28px;
  --text-mobile-h4-size: 24px;
  --text-mobile-h5-size: 20px;

  --line-height-heading: 1.2;
  --line-height-body: 1.5;

  --list-mark-width: 15px;
  --list-mark-height: 20px;

  /* Layout */
  --container-width: 1290px;
  --container-padding: 24px;
  --header-height: 69px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Buttons (UI KIT Components > Btns) */
  --btn-height: 48px;
  --btn-height-sm: 40px;
  --btn-padding-x: 24px;
  --btn-font-size: 16px;
  --btn-font-size-sm: 14px;

  /* Inputs (UI KIT Components > Input) */
  --input-height: 48px;
  --input-padding-x: 16px;
  --input-padding-y: 12px;
  --input-gap: 8px;
  --input-radius: var(--radius-pill);
  --input-radius-comment: 20px;
  --input-border: var(--color-border);
  --input-border-hover: #bdbdbd;
  --input-border-focus: var(--color-primary-pressed);
  --input-border-error: var(--color-error);
  --input-bg: var(--color-white);
  --input-bg-disabled: var(--color-bg-gray);
  --input-focus-ring: rgba(229, 51, 163, 0.16);
  --input-error-ring: rgba(219, 55, 31, 0.12);

  /* Effects */
  --shadow-card: 0 8px 32px rgba(14, 14, 14, 0.08);
  --transition: 0.25s ease;
}