/* Base global resets and utilities. Uses CSS variables defined in Layout.astro */
/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Typography */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.6; }

/* Spacing tokens (relative scale) */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

/* Containers */
.container { max-width: 1080px; margin: 1rem auto; padding: 0 1rem; }
.container-narrow { max-width: 760px; margin: 1rem auto; padding: 0 1rem; }

/* Layout helpers */
.stack { display: grid; gap: var(--space-3); }
.row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Panels */
.panel { border: 1px solid var(--border); border-radius: 8px; padding: var(--space-4); background: var(--surface); }
.card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card .card-body { padding: var(--space-4); }
.card .card-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }

/* Buttons */
.btn { appearance: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: .5rem .9rem; cursor: pointer; transition: all .15s ease; }
.btn:hover { filter: brightness(0.98); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn-outline { background: transparent; }

/* Inputs */
.input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; background: var(--surface); color: var(--text); }

/* Alerts */
.alert { border-radius: 8px; padding: .6rem .8rem; border: 1px solid; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }