:root {
  /* Colors */
  --color-bg-main: #faf9f7;
  --color-bg-dark: #0a0a0a;
  --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;
  
  /* Gradients */
  --gradient-btn: linear-gradient(90deg, #ffc600 0%, #ffbc00 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: 20px;
  
  /* 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);
}