/* ==========================================================================
   base.css — Reset, CSS Custom Properties, Typography, Utilities
   ========================================================================== */

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Colors */
  --color-primary: #6366f1;
  --color-primary-hover: #818cf8;
  --color-highlight: #f59e0b;
  --color-highlight-dim: rgba(245, 158, 11, 0.15);
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-2: #334155;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-border: #475569;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* Typography */
  --font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Courier New', monospace;
  --font-sans: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-step: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Grid */
  --byte-cell-size: calc(var(--space-lg) + var(--space-sm));
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

code, pre, .byte-grid__cell {
  font-family: var(--font-mono);
}

h1, h2, h3 {
  line-height: 1.3;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Utility: hidden */
.is-hidden {
  display: none !important;
}