:root {
  /* 1. Color System */

  /* 1.1 Brand Colors */
  --brand-primary: #005F73;
  --brand-primary-hover: #007A93;
  --brand-primary-active: #004C5C;
  --brand-accent: #94D2BD;

  /* 1.2 Neutral Colors */
  --neutral-0: #FFFFFF;
  --neutral-100: #F8F9FA;
  --neutral-200: #E9ECEF;
  --neutral-400: #CED4DA;
  --neutral-600: #6C757D;
  --neutral-800: #343A40;
  --neutral-900: #212529;

  /* 1.3 Semantic Colors */
  --semantic-success: #0A9396;
  --semantic-warning: #EE9B00;
  --semantic-danger: #AE2012;

  /* 2. Typography System */

  /* 2.1 Font Family */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-mono: 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* 2.2 Font Scale */
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;

  --line-height-h1: 1.2;
  --line-height-h2: 1.2;
  --line-height-h3: 1.3;
  --line-height-h4: 1.4;
  --line-height-body: 1.6;
  --line-height-small: 1.5;

  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-regular: 400;

  /* 3. Spacing System */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* 4. Layout */
  --layout-max-width: 1200px;
  --layout-padding: var(--space-5);

  /* 5. Miscellaneous */
  --border-radius-md: 0.5rem; /* 8px */
  --border-radius-lg: 0.75rem; /* 12px */
  --border-radius-full: 9999px;

  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* 6. Motion */
  --transition-duration: 200ms;
  --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}