/* ======================================================
   DESIGN TOKENS – TYPOGRAPHY & COLOR
====================================================== */

:root {
  /* ===============================
     FONT SIZE SYSTEM
  ================================ */

  --fs-nav: 1rem; /* 16px */
  --fs-body: 1rem; /* 16px */
  --fs-button: 1rem; /* 16px */
  --fs-card-title: 1.375rem; /* 22px */
  --fs-eyebrow: 0.875rem; /* 14px */
  --fs-heading: 2.125rem; /* 34px */

  /* ===============================
     FONT WEIGHT
  ================================ */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ===============================
     COLOR SYSTEM
  ================================ */

  --color-primary: #007cff;
  --color-text: #303135;
  --color-muted: #7a7a7a;
  --color-white: #ffffff;

  --gradient-main: linear-gradient(
    83deg,
    #31b0ff 23.9%,
    #e082ff 49.53%,
    #ff9271 78.25%
  );

  /* ===============================
     BUTTON FONT
  ================================ */
  --btn-font-family: "Poppins", system-ui, sans-serif;
  --btn-font-weight: 500;
  --btn-font-size-lg: 1rem; /* 18px */
  --btn-font-size-md: 0.875rem; /* 16px */
  --btn-font-size-sm: 0.875rem; /* 14px */

  /* ===============================
     BUTTON HEIGHT
  ================================ */
  --btn-height-lg: 3.75rem; /* 60px */
  --btn-height-md: 3.25rem; /* 52px */
  --btn-height-sm: 2.75rem; /* 44px */

  /* ===============================
     BUTTON PADDING (INLINE)
  ================================ */
  --btn-padding-lg: 1.75rem; /* 28px */
  --btn-padding-md: 1.5rem; /* 24px */
  --btn-padding-sm: 1.25rem; /* 20px */

  /* ===============================
     BUTTON RADIUS
  ================================ */
  --btn-radius: 0.75rem; /* 12px */

  /* ===============================
     BUTTON COLOR
  ================================ */
  --btn-primary-bg: #007cff;
  --btn-primary-text: #ffffff;

  --btn-outline-border: #2563eb;
  --btn-outline-text: #2563eb;
}

/* MAIN / BIG */
.btn--lg {
  min-height: 3.75rem; /* 60px */
  padding-inline: 1.75rem; /* 28px */
  font-size: 1.125rem; /* 18px */
}

/* MEDIUM */
.btn--md {
  min-height: 3.25rem; /* 52px */
  padding-inline: 1.5rem; /* 24px */
  font-size: 1rem; /* 16px */
}

/* SMALL */
.btn--sm {
  min-height: 2.75rem; /* 44px */
  padding-inline: 1.25rem; /* 20px */
  font-size: 0.875rem; /* 14px */
}