:root {
  /* Colors */
  --color-theme: #fc3530;
  --color-bg-main: #faf9f7;
  --color-bg-dark: #f5f9ff;
  --color-bg-white: #fefefe;
  --color-bg-card: #ffffff;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text-main: #000000;
  --color-text-sub: #333333;
  --color-text-white: #ffffff;
  --color-border: #edebeb;
  --color-my-plan-btn: var(--color-theme);

  /* Gradients */
  --gradient-btn: linear-gradient(
    90deg,
    var(--color-theme) 0%,
    var(--color-theme) 100%
  );
  --gradient-overlay: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 49.81%,
    rgba(0, 0, 0, 0.6) 100%
  );

  /* Fonts */
  --font-black:
    "Montserrat-Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-bold:
    "Montserrat-Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-semibold:
    "Montserrat-SemiBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-medium:
    "Montserrat-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-regular:
    "Montserrat-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout - Spacing */
  --pc-gap: 160px;
  --pad-gap: 60px;
  --mobile-gap: 36px;
  --header-height: 105px;
  --header-padding-x: 240px;
  --pad-padding-x: 32px;
  --mobile-padding-x: 16px;

  /* Text Sizes - PC */
  --font-size-title-main: 58px;
  --font-size-title-sub: 28px;
  --font-size-btn: 20px;
  --font-size-card-title: 20px;
  --font-size-card-desc: 18px;

  /* Text Sizes - Mobile */
  --mobile-title-main: 32px;
  --mobile-title-sub: 16px;

  /* Components */
  --btn-radius: 36px;
  --card-radius: 36px;
  --item-radius: 36px;

  /* Animations & Transitions */
  --transition-base: all 0.3s;
  --transition-smooth: all 0.5s ease-in-out;

  /* Shadows */
  --shadow-card: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0px 15px 30px rgba(0, 0, 0, 0.1);
  --shadow-item: 0 10px 20px rgba(0, 0, 0, 0.5);
  --shadow-avatar: 0 10px 20px rgba(0, 0, 0, 0.3);
  --shadow-info: 0 4px 20px rgba(0, 0, 0, 0.1);
}