/* Base reset and typography */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
html, body { height: 100%; }
body { margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Base */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: var(--color-text, #000000);
}

p { margin: 0 0 12px; color: var(--color-text, #111111); }

/* Ensure emojis and icons display properly */
h1, h2, h3, h4, h5, h6 {
  font-variant-emoji: emoji;
}

/* Icon and emoji styling */
.icon, .emoji, [class*="icon"], [class*="emoji"] {
  font-variant-emoji: emoji;
  display: inline-block;
}

main { display: block; }

section { padding: 48px 0; }

/* Links */
a:hover { text-decoration: none; }

/* Normalize nav lists globally (avoid bullets/extra spacing) */
nav ul, nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Forms */
label { display: block; margin-bottom: 6px; color: var(--color-text-muted); }
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #3c79ff;
  box-shadow: 0 0 0 3px rgba(60,121,255,0.15);
}

/* Tables (light) */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
th { text-align: left; color: var(--color-text); }
td { color: var(--color-text-muted); }