:root {
  /* ── Colors ── */
  --color-primary: #25395A;
  --color-primary-light: rgba(0, 73, 201, 0.1);
  --color-preloader: #046bb8;
  --filter-icon: brightness(0) invert(1);
  --color-accent: #21a7d0;
  --color-accent-light: rgba(33, 167, 208, 0.1);

  --color-bg-page: #f3f8f9;
  --color-bg-card: #ffffff;
  --color-bg-contact: #ededed;
  --color-bg-dark: #000000;

  --color-text-heading: #000000;
  --color-text-body: #737373;
  --color-text-white: #ffffff;
  --color-text-link: var(--color-primary);

  --color-border: var(--color-primary);

  /* ── Typography ── */
  --font-family: "Poppins", sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 24px;

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

  /* ── Spacing ── */
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* ── Shadows ── */
  --shadow-card: 5px 5px 10px 0px rgba(166, 166, 166, 0.2);
  --shadow-btn: 0px 4px 8px 0px rgba(0, 0, 0, 0.32);

  /* ── Transitions ── */
  --transition: all 0.3s ease;

  /* ── Layout ── */
  --max-width: 425px;
}