@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* Colors - Base Tokens */
  --color-background-dark: #09090b;
  --color-background-dark-surface: #18181b;
  --color-background-dark-hover: #27272a;
  --color-background-light: #fafafa;
  --color-background-light-surface: #ffffff;

  --color-text-dark-heading: #f4f4f5;
  --color-text-dark-body: #a1a1aa;
  --color-text-dark-muted: #71717a;
  --color-text-light-heading: #18181b;
  --color-text-light-body: #52525b;

  --color-border-dark: #27272a;
  --color-border-light: #e4e4e7;

  --color-accent-link: #3b82f6;

  /* Font Family */
  --font-family-sans: "Inter", sans-serif;
  --font-family-mono: "JetBrains Mono", monospace;

  /* Font Weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Border Radius */
  --border-radius-sm: 6px;
  --border-radius-default: 8px;
  --border-radius-full: 9999px;

  /* Spacing */
  --spacing-prose-max-width: 672px;
  --spacing-compact-max-width: 448px;
  --spacing-layout-max-width: 1024px;

  /* Transition */
  --transition-fast: 150ms ease;
  --transition-default: 200ms ease;

  /* Semantic Tokens (Default Local Mode - Dark) */
  --color-background: var(--color-background-dark);
  --color-background-surface: var(--color-background-dark-surface);
  --color-background-hover: var(--color-background-dark-hover);
  
  --color-text-heading: var(--color-text-dark-heading);
  --color-text-body: var(--color-text-dark-body);
  --color-text-muted: var(--color-text-dark-muted);
  
  --color-border: var(--color-border-dark);
}

/* Light Mode Overrides */
@media (prefers-color-scheme: light) {
  :root {
    --color-background: var(--color-background-light);
    --color-background-surface: var(--color-background-light-surface);
    --color-background-hover: #f4f4f5; /* Fallback since light-hover isn't in tokens */
    
    --color-text-heading: var(--color-text-light-heading);
    --color-text-body: var(--color-text-light-body);
    --color-text-muted: #71717a; /* Default to dark-muted as no light version exists */
    
    --color-border: var(--color-border-light);
  }
}