:root {
  /* Font */
  --font-sans: var(--font-main);

  /* Layout */
  --container-width: 1400px;
  --header-height: 88px;

  /* Font Size */
  --font-h1: 42px;
  --font-h2: 32px;
  --font-h3: 24px;
  --font-body: 16px;
  --font-small: 14px;
  --font-caption: 12px;

  /* Mobile Font Size */
  --font-h1-mobile: 28px;
  --font-h2-mobile: 24px;
  --font-h3-mobile: 20px;
  --font-body-mobile: 15px;

  /* Color */
  --front-color-primary: #4f46e5;
  --front-color-primary-sub: #6366f1;
  --front-color-cta: #ff7a1a;
  --front-color-bg: #f4f6fb;
  --front-color-card: #ffffff;
  --front-color-border: #dde3ef;
  --front-color-text: #0f172a;
  --front-color-text-sub: #64748b;

  --front-color-success: #12b76a;
  --front-color-warning: #f79009;
  --front-color-error: #f04438;

  /* Radius */
  --front-radius-sm: 10px;
  --front-radius-md: 14px;
  --front-radius-lg: 18px;

  /* Shadow */
  --front-shadow-card: 0 10px 30px rgba(15, 23, 42, 0.06);

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}