/**
 * Theme variables - Neo-brutalist color scheme
 *
 * Light mode: Blue primary, orange accent
 * Dark mode: Orange primary, blue accent
 */

/* Google Fonts - display font for hero typography */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&display=swap");

:root {
  /* Light mode (default) */
  --color-bg: #fafafa;
  --color-text: #1a1a1a;
  --color-primary: #0066ff;
  --color-accent: #ff6b00;
  --color-border: #0066ff;

  /* Secondary colors */
  --color-bg-secondary: #f0f0f0;
  --color-text-muted: #666666;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --max-width-prose: 768px;
  --max-width-wide: 1024px;
  --max-width-full: 1400px;

  /* Panel widths for home page */
  --panel-right-width: 150px;
  --panel-shelf-bg: var(--color-accent);
  --panel-controls-bg: var(--color-bg);

  /* Border widths - neo-brutalist thin lines */
  --border-thin: 1px;
  --border-medium: 2px;

  /* Typography */
  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
  --font-display: "Space Grotesk", system-ui, sans-serif;

  /* Animation */
  --transition-fast: 0.15s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index layers */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-overlay: 1100;

  /* Guidelines */
  --guideline-color: var(--color-accent);
  --guideline-dash: 4px;
}

[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-text: #ffffff;
  --color-primary: #ff6b00;
  --color-accent: #0066ff;
  --color-border: #ff6b00;

  /* Secondary colors */
  --color-bg-secondary: #1a1a1a;
  --color-text-muted: #999999;

  /* Panel colors flip in dark mode */
  --panel-shelf-bg: var(--color-accent);
  --panel-controls-bg: var(--color-bg);

  /* Guidelines */
  --guideline-color: var(--color-accent);
}

/* Media query for reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-medium: 0s;
    --transition-slow: 0s;
  }
}