/* ══════════════════════════════════════════
   BASE — Design system, reset, shared utilities
   inductionheatingguide.com
══════════════════════════════════════════ */

:root {
  /* Typography */
  --mono:   'DM Mono', monospace;
  --sans:   'DM Sans', sans-serif;

  /* Ink (text) */
  --ink:    #0a0a0a;
  --ink2:   #444;
  --ink3:   #888;
  --ink4:   #bbb;

  /* Backgrounds */
  --bg:     #fafafa;
  --bg2:    #f5f5f5;
  --bg3:    #efefef;
  --white:  #ffffff;

  /* Rules / borders */
  --rule:   #e0e0e0;
  --rule2:  #d0d0d0;

  /* Accent */
  --accent:  #0047ff;
  --accent2: #0035c4;

  /* Conductivity tier colors */
  --c-excellent:    #0047ff;
  --c-good:         #3370dd;
  --c-moderate:     #6699cc;
  --c-poor:         #aab4c0;
  --c-semiconductor:#7a60b0;
  --c-nonmetal:     #d5dae0;
  --c-noble:        #e5eaf0;
  --c-unknown:      #e8eaed;
  --c-curie:        #c0392b;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Shared utilities */
.section-label {
  font-family: var(--mono); font-size: 10px; color: var(--ink4);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 48px;
  display: flex; align-items: center; gap: 16px;
}
.section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}

.section-wrap { padding: 64px 0 0; }
.section-header {
  display: flex; align-items: baseline; gap: 20px;
  margin-bottom: 32px; padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.section-num { font-family: var(--mono); font-size: 11px; color: var(--ink3); letter-spacing: 0.1em; }
.section-header h2 { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.section-header p { font-size: 13px; color: var(--ink2); margin-left: auto; max-width: 340px; text-align: right; line-height: 1.5; }

/* Shared button styles */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; padding: 12px 24px;
  transition: all 0.15s;
}
.btn-fill {
  background: var(--ink); color: var(--white);
  border: 1px solid var(--ink);
}
.btn-fill:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost {
  background: transparent; color: var(--ink2);
  border: 1px solid var(--rule);
}
.btn-ghost:hover { border-color: var(--ink2); color: var(--ink); }

/* Shared filter button */
.filter-btn {
  font-family: var(--mono); font-size: 11px; color: var(--ink2);
  border: 1px solid var(--rule2); background: transparent;
  padding: 5px 14px; border-radius: 2px; cursor: pointer;
  letter-spacing: 0.04em; transition: all 0.15s;
  text-transform: uppercase;
}
.filter-btn:hover { color: var(--ink); border-color: var(--ink3); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* Shared tag styles */
.td-tag {
  display: inline-block; font-family: var(--mono); font-size: 9px;
  padding: 2px 7px; border-radius: 2px; margin-right: 4px; margin-bottom: 3px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tag-hardening { background: rgba(74,158,255,0.12); color: #4a9eff; border: 1px solid rgba(74,158,255,0.25); }
.tag-joining   { background: rgba(245,166,35,0.12); color: #f5a623; border: 1px solid rgba(245,166,35,0.25); }
.tag-forming   { background: rgba(80,200,120,0.12); color: #50c878; border: 1px solid rgba(80,200,120,0.25); }
.tag-melting   { background: rgba(224,90,0,0.15);   color: #e05a00; border: 1px solid rgba(224,90,0,0.3); }
.tag-other     { background: rgba(150,150,150,0.1); color: #888;    border: 1px solid rgba(150,150,150,0.2); }

/* Animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}