/* ============================================================================
   Global CSS System — MTR.CM Landing
   Color palette, typography, spacing, and reset rules
   ============================================================================ */

:root {
  /* Color System */
  --color-primary: #28334A;
  --color-accent: #FC4C02;
  --color-secondary: #46394E;
  --color-white: #FFFFFF;
  --color-black: #000000;
  /* Hero WebGL base / dark FX surface */
  --color-dark: #0E1119;

  /* Semantic Colors */
  --color-surface: #FFFFFF;
  --color-on-surface: #28334A;
  --color-surface-dim: #F5F5F5;

  /* Typography Scale (px) */
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-24: 1.5rem;
  --font-size-32: 2rem;
  --font-size-48: 3rem;

  /* Spacing Scale (4px base) */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

  /* Z-Index Scale */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 40;
  --z-modal: 100;
  --z-tooltip: 1000;

  /* Border Radius */
  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;
  --radius-16: 1rem;
  --radius-24: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   Reset & Base Styles
   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'PT Mono', monospace;
  font-size: var(--font-size-16);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================================
   Typography System
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'PT Serif', serif;
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: var(--space-16);
}

h1 {
  font-size: var(--font-size-48);
}

h2 {
  font-size: var(--font-size-32);
}

h3 {
  font-size: var(--font-size-24);
}

h4, h5, h6 {
  font-size: var(--font-size-18);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-16);
  line-height: var(--line-height-relaxed);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s ease-out;
}

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

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-4);
}

/* ============================================================================
   Interactive Elements
   ============================================================================ */

button {
  font-family: 'PT Mono', monospace;
  font-size: var(--font-size-16);
  cursor: pointer;
  border: none;
  border-radius: var(--radius-8);
  padding: var(--space-12) var(--space-24);
  transition: all 0.15s ease-out;
  min-height: 44px;
  min-width: 44px;
}

button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   Responsive Utilities
   ============================================================================ */

@media (max-width: 768px) {
  :root {
    --font-size-48: 2rem;
    --font-size-32: 1.5rem;
    --font-size-24: 1.25rem;
  }

  body {
    font-size: var(--font-size-14);
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-48: 1.5rem;
    --font-size-32: 1.25rem;
    --font-size-24: 1rem;
  }

  h1 {
    font-size: var(--font-size-32);
  }

  h2 {
    font-size: var(--font-size-24);
  }
}

/* ============================================================================
   Logo internals (shared across hero/footer)
   ============================================================================ */

/* Specular highlight overlay inside the logo SVG. JS toggles its opacity
   between 1 (cursor outside logo → light reaches surface) and 0 (cursor
   inside → "extinguished", mirroring the WebGL tubes rule). */
.logo__spec {
  transition: opacity 0.25s ease-out;
}

/* ============================================================================
   Accessibility
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Site uses a fixed light theme by design (deliberate, not auto-inverted).
   Surface stays light regardless of system color-scheme preference. */