:root {
  /* Colors - Modern SaaS Palette */
  --color-primary: #1769ff;
  --color-primary-dark: #0f3fae;
  --color-primary-soft: #eaf2ff;
  --color-primary-pale: #f5f8ff;

  --color-accent: #625cff;
  --color-cyan: #2ab8ef;

  --color-navy: #0d1d3b;
  --color-heading: #111827;
  --color-text: #475467;
  --color-muted: #667085;
  --color-border: #e7ecf4;

  --color-background: #ffffff;
  --color-surface: #f8faff;
  --color-surface-blue: #f1f5ff;
  --color-white: #ffffff;
  --color-dark: #111827;

  /* Typography */
  --font-base: 'Pretendard', sans-serif;

  /* Layout */
  --container-max: 1440px;
  --container-gutter: 40px;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows - Softer SaaS Style */
  --shadow-sm: 0 4px 12px rgba(25, 55, 110, 0.04);
  --shadow-md: 0 10px 30px rgba(25, 55, 110, 0.06), 0 2px 8px rgba(25, 55, 110, 0.03);
  --shadow-lg: 0 18px 40px rgba(25, 55, 110, 0.10);

  /* Transitions */
  --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1024px) {
  :root {
    --container-gutter: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-gutter: 20px;
  }
}

@media (max-width: 360px) {
  :root {
    --container-gutter: 16px;
  }
}