:root {
    /* =====================================
       COLOR TOKENS
       ===================================== */
  
    /* Surfaces */
    --color-page: #ffffff;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
  
    /* Text */
    --color-text-primary: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
  
    /* Action */
    --color-action-bg: #111827;
    --color-action-text: #ffffff;
  
  
    /* =====================================
       SPACING TOKENS
       ===================================== */
  
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
  
  
    /* =====================================
       TYPOGRAPHY TOKENS
       ===================================== */
  
    /* Font family */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
    /* Font sizes */
    --text-title: 18px;
    --text-body: 14px;
    --text-meta: 12px;
  
    /* Font weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
  
    /* Line heights */
    --line-tight: 1.3;
    --line-normal: 1.5;
  
  
    /* =====================================
       RADIUS TOKENS
       ===================================== */
  
    --radius-sm: 4px;
    --radius-md: 6px;
  
  
    /* =====================================
       BORDER TOKENS
       ===================================== */
  
    --border-width: 1px;
  }