/* ============ Global Base Styles (shared, page-agnostic) ============ */
/* Keep this file light. Page layouts/themes live in page CSS (e.g., smartstacks.css). */

/* ----------- Design tokens (defaults; override per page if needed) ----------- */
:root {
  --brand-start: #6ad0e3;
  --brand-end:   #e4bede;

  --text:       #111;
  --text-dim:   #666;
  --bg:         #fff;

  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;

  --border:     rgba(0,0,0,.12);
  --panel:      rgba(0,0,0,.04);
}

/* ----------- Resets & base ----------- */
html { box-sizing: border-box; color-scheme: light dark; }
*, *::before, *::after { box-sizing: inherit; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  /* Fonts are page-specific (e.g., Inter loaded on pages that want it) */
}

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

/* ----------- Basic typography ----------- */
a { color: inherit; text-decoration: underline; }
a:hover { text-decoration: none; }

/* ----------- Utilities (safe to share) ----------- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}

/* Generic card shell (optional, lightweight) */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Optional accent strip (uses brand tokens; harmless site-wide) */
.accent-strip {
  height: 3px;
  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
  opacity: .75;
}

/* Smooth scroll site-wide (safe) */
html { scroll-behavior: smooth; }