/* ==========================================================================
   DESIGN TOKENS
   Shared variables for all knowledge-system services
   ========================================================================== */

:root {
  /* Colors - Brutalist palette */
  --color-bg: #fff;
  --color-text: #000;
  --color-muted: #666;
  --color-border: #000;
  --color-border-light: #eee;
  --color-hover: #f5f5f5;
  --color-danger: #c00;
  --color-danger-bg: #fee;

  /* Typography */
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  --font-size-xs: 0.625rem;   /* 10px - micro labels */
  --font-size-sm: 0.75rem;    /* 12px - labels, captions */
  --font-size-base: 0.875rem; /* 14px - body text */
  --font-size-lg: 1rem;       /* 16px - inputs */
  --font-size-xl: 1.25rem;    /* 20px - titles */
  --font-size-2xl: 1.5rem;    /* 24px - large titles */
  --font-size-3xl: 2rem;      /* 32px - hero text */

  /* Spacing scale */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */

  /* Layout */
  --max-width: 1200px;
  --container-padding: 1rem;

  /* Breakpoints (for reference - use in media queries) */
  --breakpoint-mobile: 768px;

  /* Safe areas for mobile */
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
}

/* Dark mode variant (for active sessions, evening mode) */
[data-theme="dark"] {
  --color-bg: #000;
  --color-text: #fff;
  --color-muted: #888;
  --color-border: #fff;
  --color-border-light: #333;
  --color-hover: #111;
}

/* Break mode (light gray background) */
[data-theme="break"] {
  --color-bg: #f5f5f5;
}