:root {
  /* ==================================================
     BRAND
  ================================================== */

  --color-primary: #20d67b;
  --color-primary-hover: #18bd69;
  --color-primary-soft: #eafbf2;

  --color-navy: #061d36;
  --color-navy-light: #0d2e52;

  --color-text: #0b1b2b;
  --color-text-soft: #667085;
  --color-text-light: #98a2b3;

  --color-white: #ffffff;

  --color-bg: #ffffff;
  --color-bg-soft: #f7f9fc;
  --color-bg-muted: #eef3f8;

  --color-border: #e6ebf3;

  --color-success: #20d67b;

  /* ==================================================
     TYPOGRAPHY
  ================================================== */

  --font-family: "Poppins", sans-serif;

  /* ==================================================
     LAYOUT
  ================================================== */

  --container-width: 1200px;

  --header-height: 76px;

  /* ==================================================
     RADIUS
  ================================================== */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ==================================================
     SHADOWS
  ================================================== */

  --shadow-sm:
    0 4px 14px rgba(6, 29, 54, 0.06);

  --shadow-md:
    0 12px 35px rgba(6, 29, 54, 0.10);

  --shadow-lg:
    0 25px 60px rgba(6, 29, 54, 0.14);

  /* ==================================================
     TRANSITIONS
  ================================================== */

  --transition:
    0.25s ease;
}