/*
 * base.css — Design tokens, reset, layout shell
 * Minecraft Master Guide
 */

/* ════════════════════════════════════════
   DESIGN TOKENS
   Nielsen H4: Consistency — single source of truth
   for all colours, spacing, typography, shadows
════════════════════════════════════════ */
:root {
  /* Colour palette */
  --bg:          #f5f2eb;
  --bg-card:     #ffffff;
  --bg-sidebar:  #1a1f16;
  --bg-header:   #141a10;

  --ink:         #1c2018;
  --ink-2:       #3d4438;
  --ink-3:       #6b7566;
  --border:      #d8d4cb;
  --border-2:    #e8e5de;

  --green:       #2d6a20;
  --green-light: #4a9e2a;
  --green-muted: #e8f5e3;
  --green-glow:  rgba(45,106,32,0.12);

  --gold:        #b08020;
  --gold-muted:  #fdf6e3;

  --red:         #c0392b;
  --red-muted:   #fdecea;

  --amber:       #d97706;
  --amber-muted: #fffbeb;

  --purple:      #5b21b6;
  --purple-muted:#f5f3ff;

  --diamond:     #0891b2;
  --diamond-muted:#e0f7fa;

  /* Spacing & shape */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   14px;

  /* Elevation */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow:      0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.14);

  /* Layout */
  --sidebar-w:   260px;
  --header-h:    60px;

  /* Typography */
  --font-body:   'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

  /* Motion */
  --transition:  0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Sidebar contrast fix — was 0.5 (2.8:1), now 0.72 (5.1:1 WCAG AA) */
  --sidebar-inactive: rgba(255,255,255,0.72);
}

/* ════════════════════════════════════════
   ACCESSIBILITY — MOTION & PRINT
════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .bar-fill { transition: none !important; }
  .content-section { animation: none !important; }
}

@media print {
  .sidebar, .site-header, .breadcrumb, .skip-link,
  .back-to-top, .mobile-scrim,
  .ad-unit, .ad-leaderboard, .ad-in-content, .ad-sidebar,
  .ad-mid-section, .ad-end-content, .ad-mobile-anchor { display: none !important; }
  .app-shell { display: block; }
  main { overflow: visible; }
  .content-section { display: block !important; padding: 1rem 0; break-before: page; }
  .content-section:first-of-type { break-before: auto; }
  .topic-card { break-inside: avoid; border: 1px solid #ccc; margin-bottom: 8px; }
  .card-body { display: block !important; }
  .callout-warn, .callout-tip, .callout-verified, .callout-fix {
    border: 1px solid #999; background: #f9f9f9 !important; color: #000 !important;
  }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  a { color: #000; text-decoration: none; }
}

/* ════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Nielsen H7: Skip nav for keyboard users */
.skip-link {
  position: absolute; top: -40px; left: 12px; z-index: 9999;
  background: var(--green); color: #fff; padding: 8px 16px;
  border-radius: var(--radius); font-size: 0.875rem; font-weight: 600;
  text-decoration: none; transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* ════════════════════════════════════════
   APP SHELL LAYOUT (CSS Grid)
════════════════════════════════════════ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  min-height: 100vh;
}

/* ════════════════════════════════════════
   MAIN CONTENT AREA
════════════════════════════════════════ */
main { overflow: hidden; background: var(--bg); }

/* Section transitions */
.content-section { display: none; padding: 32px 32px 48px; max-width: 860px; animation: fadeSlide 0.25s ease; }
.content-section.active { display: block; }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════
   UTILITY CLASSES
════════════════════════════════════════ */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}