:root {
  --font-base: "Poppins", sans-serif;
  /* --font-base: "DM Sans", sans-serif; */
  /* --font-base: "Gabarito", sans-serif;; */

  --fs-10: 10px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-64: 64px;

  --fontLight: 300;
  --fontRegular: 400;
  --fontMedium: 500;
  --fontSemibold: 600;
  --fontBold: 700;
  --fontExtraBold: 800;

  --color-primary-50: #F7F3FF;
  --color-primary-100: #E7DBFF;
  --color-primary-500: #B08BFE;
  --color-primary-600: #A07EE7;
  --color-primary-700: #7D63B4;
  --color-secondary-500: #6131DF;
  --color-secondary-400: #815AE5;

  --color-success-500: #16a34a;
  --color-warning-500: #f59e0b;
  --color-danger-500: #dc2626;

  --color-text-primary: #1B1A39;
  --color-text-secondary: #494861;
  --color-text-muted: #9696A4;

  --color-surface-body: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-soft: #f8fafc;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
  --shadow-md: 0 8px 24px rgb(15 23 42 / 0.12);
  --shadow-lg: 0 18px 48px rgb(15 23 42 / 0.16);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  --container-max: 1280px;
  --container-gutter: 24px;

  --brand-primary: var(--color-primary-500);
  --brand-primary-hover: var(--color-primary-600);
  --brand-primary-soft: var(--color-primary-50);
  --brand-secondary: var(--color-secondary-500);

  --btn-primary-bg: var(--brand-primary);
  --btn-primary-hover-bg: var(--brand-primary-hover);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: var(--color-secondary-500);
  --btn-secondary-hover-bg: var(--color-secondary-400);

  --card-bg: var(--color-surface-card);
  --card-border: color-mix(in srgb, var(--brand-primary) 14%, #e5e7eb);
  --section-bg: var(--color-surface-body);

  --text-heading: var(--color-text-primary);
  --text-body: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);

  --link-color: var(--brand-primary);
  --link-hover-color: var(--brand-primary-hover);
  --icon-color: var(--brand-primary);
  --highlight-bg: var(--brand-primary-soft);
  --badge-bg: var(--brand-primary-soft);
  --badge-text: var(--brand-primary-hover);
  --active-bg: var(--brand-primary-soft);
  --active-text: var(--brand-primary);
  --gradient-primary: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary-hover) 100%
  );

  --color-background: var(--color-surface-body);
  --color-text: var(--text-heading);
  --color-muted: var(--text-muted);
  --color-primary: var(--brand-primary);

  --bs-primary: var(--brand-primary);
  --bs-body-bg: var(--color-surface-body);
  --bs-body-color: var(--text-body);
  --bs-border-radius: var(--radius-md);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-hover);
}