/* Sterile — design tokens & base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Surfaces */
  --bg-base: #f4f6f8;
  --bg-elevated: #ffffff;
  --bg-muted: #eef1f4;
  --bg-lab-bench: #fafbfc;

  /* Brand — safety orange */
  --accent: #ff6b00;
  --accent-hover: #e85d00;
  --accent-soft: rgba(255, 107, 0, 0.1);
  --accent-border: rgba(255, 107, 0, 0.35);

  /* Text */
  --text-primary: #1a2332;
  --text-secondary: #5c6b7a;
  --text-muted: #8b99a8;
  --text-inverse: #ffffff;

  /* Semantic */
  --success: #059669;
  --success-soft: #ecfdf5;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --warning: #d97706;
  --warning-soft: #fffbeb;

  /* Borders & shadows */
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1);

  /* Layout (calculated) */
  --sidebar-w: 13.5rem;       /* 216px — nav labels */
  --sidebar-w-collapsed: 4rem; /* 64px — icons only */
  --hud-h: 3.25rem;           /* 52px */
  --page-pad: 1.25rem;        /* 20px */
  --content-max: 56rem;       /* 896px */
  --radius: 0.5rem;
  --radius-lg: 0.75rem;

  /* Type scale */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --transition: 0.15s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  min-height: 100vh;
}

body.game-page {
  overflow: hidden;
  height: 100dvh;
}

/* Cleanroom grid floor */
.grid-bg {
  background-color: var(--bg-base);
  background-image:
    linear-gradient(rgba(255, 107, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 0, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
  background-position: center center;
}

.safety-stripe {
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(255, 107, 0, 0.25) 6px,
    rgba(255, 107, 0, 0.25) 12px
  );
  border-radius: var(--radius) var(--radius) 0 0;
}

.font-mono { font-family: var(--font-mono); }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0; }

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

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