:root {
    --background: #ffffff;
    --foreground: #09090b;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --border: #e4e4e7;
    --primary: #18181b;
    --primary-foreground: #fafafa;
    --radius: 0.375rem;
    --ring: #18181b;
    
    font-family: system-ui, -apple-system, sans-serif;
  }
  
  /* 
    We use the .dark class for manual toggling. 
  */
  .dark {
    --background: #09090b;
    --foreground: #fafafa;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
    --border: #27272a;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --ring: #d4d4d8;
  }
  
  /* 
    We keep the media query for users who haven't set a preference, 
    but ensure it doesn't override a manual "light" class choice.
  */
  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      --background: #09090b;
      --foreground: #fafafa;
      --muted: #27272a;
      --muted-foreground: #a1a1aa;
      --border: #27272a;
      --primary: #fafafa;
      --primary-foreground: #18181b;
      --ring: #d4d4d8;
    }
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }