/* base.css — minimal structural layer (Epic 12 / HTML Contract v1).
   
   This file provides:
   - CSS reset/normalize essentials
   - Core variables as fallbacks (themes should override)
   - Layout hooks for the HTML contract
   
   DO NOT add visual styles here — those belong in theme files.
   Keep this lightweight; it loads before any theme. */

:root {
  /* Fallback values — themes override these */
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --border: rgba(0, 0, 0, 0.12);
  --panel: #f6f7f9;
  --link: currentColor;
  --maxw: 48rem;
  --pad: 1rem;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1015;
    --fg: #e9e9ea;
    --muted: #a7a7ad;
    --border: rgba(255, 255, 255, 0.12);
    --panel: #1a1c24;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESET / NORMALIZE
   ═══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
}

/* Inherit fonts in form elements */
input, textarea, button, select {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Remove default list styles (themes can add back) */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* Responsive media */
img, video, picture, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Table defaults */
table {
  border-collapse: collapse;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYOUT HOOKS (HTML Contract v1)
   These are the structural hooks that themes can style.
   ═══════════════════════════════════════════════════════════════════════════════ */
[data-layout="container"] {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}