:root {
  /* Brand colors */
  --color-primary: #e60012;
  --color-primary-dark: #cc0010;
  --color-accent: #ff6b6b;

  /* Base colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-text-subtle: #999999;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-bg-alt-dark: #e9ecef;
  --color-border: #dddddd;

  /* RGB for alphas */
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;
  
  /* Additional colors for specific use cases */
  --color-text-dark: #333333;
  --color-white-transparent-20: rgba(255, 255, 255, 0.2);
  --color-white-transparent-90: rgba(255, 255, 255, 0.9);
  --color-white-transparent-05: rgba(255, 255, 255, 0.05);
  --color-white-transparent-60: rgba(255, 255, 255, 0.6);
  --color-white-transparent-80: rgba(255, 255, 255, 0.8);
  --color-white-transparent-70: rgba(255, 255, 255, 0.7);
  --color-white-transparent-15: rgba(255, 255, 255, 0.15);
  --color-white-transparent-50: rgba(255, 255, 255, 0.5);
  --color-white-transparent-10: rgba(255, 255, 255, 0.1);
  --color-white-transparent-30: rgba(255, 255, 255, 0.3);
  --color-white-transparent-40: rgba(255, 255, 255, 0.4);
  --color-primary-transparent-10: rgba(230, 0, 18, 0.1);
  --color-gray-dark: #333333;
  --color-gray-light: #cccccc;
  --color-black-transparent-70: rgba(0, 0, 0, 0.7);
  --color-black-transparent-20: rgba(0, 0, 0, 0.2);
  --color-black-transparent-30: rgba(0, 0, 0, 0.3);
  --color-black-transparent-50: rgba(0, 0, 0, 0.5);
  --color-black-transparent-90: rgba(0, 0, 0, 0.9);
  --color-black-transparent-10: rgba(0, 0, 0, 0.1);
  --color-black-transparent-80: rgba(0, 0, 0, 0.8);
  --color-black-transparent-05: rgba(0, 0, 0, 0.05);
  --color-black-transparent-08: rgba(0, 0, 0, 0.08);
  --color-black-transparent-40: rgba(0, 0, 0, 0.4);
  --color-black-transparent-15: rgba(0, 0, 0, 0.15);
  
  /* Specific colors */
  --color-navy: #003d7a;
  --color-navy-light: #0066cc;
  --color-dark-gray: #1a1a1a;
  --color-medium-gray: #2d2d2d;
  --color-light-gray: #666666;
  --color-pink-light: #ffd9d9;
  --color-blue-light: #f8f9fc;
  --color-gray-border: #e8e8e8;

  /* Gradients */
  --gradient-page-hero-start: #f5f7fa;
  --gradient-page-hero-end: #c3cfe2;
  --gradient-people-start: #667eea;
  --gradient-people-end: #764ba2;
  --gradient-recruit-start: #f093fb;
  --gradient-recruit-end: #f5576c;

  /* Layout */
  --header-height: 120px;
  --logo-height: 48px;

  /* Entry Button - base size */
  --entry-btn-width: 240px;
  --entry-btn-height: 64px;
  --entry-btn-font-size: 16px;
}

/* Responsive overrides for Entry Button */
/* Large tablets and small desktops */
@media (max-width: 1200px) {
  :root {
    --header-height: 100px;
    --logo-height: 42px;
    --entry-btn-width: 200px;
    --entry-btn-height: 56px;
    --entry-btn-font-size: 15px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  :root {
    --header-height: 80px;
    --logo-height: 36px;
    --entry-btn-width: 160px;
    --entry-btn-height: 48px;
    --entry-btn-font-size: 14px;
  }
}

/* Mobile devices */
@media (max-width: 576px) {
  :root {
    --header-height: 70px;
    --logo-height: 32px;
    --entry-btn-width: 140px;
    --entry-btn-height: 44px;
    --entry-btn-font-size: 13px;
  }
}