:root {
  /* Base colors */
  --color-bg: #FAFAFA;
  --color-bg-alt: #F0F0F5;
  --color-surface: #FFFFFF;
  --color-text: #1A1A2E;
  --color-text-muted: #6B7280;
  --color-border: #E5E7EB;

  /* Engineering accent: Indigo → Violet */
  --color-eng-primary: #4F46E5;
  --color-eng-secondary: #7C3AED;
  --color-eng-accent: #06B6D4;
  --color-eng-gradient: linear-gradient(135deg, #4F46E5, #7C3AED);

  /* Language/Translation accent: Red → Orange */
  --color-lang-primary: #DC2626;
  --color-lang-secondary: #EA580C;
  --color-lang-accent: #D97706;
  --color-lang-gradient: linear-gradient(135deg, #DC2626, #EA580C);

  /* Landing: bridge gradient */
  --color-landing-gradient: linear-gradient(135deg, #4F46E5, #7C3AED, #DC2626);

  /* Spacing (8px base) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Typography */
  --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Playfair Display', 'Noto Serif JP', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Border radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* Transition */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}