/* base.css — CI SSOT reset + global elements (PRJ-04 Override 2026-03-22) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--h2t-font);
  background: var(--h2t-bg);
  color: var(--h2t-ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--h2t-brand-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--h2t-font);
  font-weight: 600;
  color: var(--h2t-ink);
  line-height: 1.25;
}

code {
  font-size: .85em;
  background: rgba(0,156,173,.09);
  color: #007a8a;
  padding: 1px 5px;
  border-radius: 4px;
}

.container { max-width: 1200px; margin: 0 auto; padding: 24px; }

/* ─── Card ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--h2t-surface);
  border: 1px solid var(--h2t-border);
  border-radius: var(--h2t-radius);
  box-shadow: var(--h2t-shadow);
  padding: 20px;
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 6px;
  border: 0;
  font-family: var(--h2t-font);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: opacity .15s, box-shadow .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { opacity: .9; }
.btn-cta {
  background: var(--h2t-brand-cyan);
  color: #fff;
  box-shadow: var(--h2t-shadow);
}
.btn-cta.secondary {
  background: var(--h2t-accent);
}
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--h2t-brand-cyan);
  color: var(--h2t-brand-cyan);
}
.btn-outline:hover { background: rgba(0,156,173,.06); }

/* ─── Utility ───────────────────────────────────────────────────────────────── */
.muted  { color: rgba(46,58,67,.6); }
.small  { font-size: 12px; }
.hidden { display: none !important; }
.right  { text-align: right; }