/* HANARO shared tokens and primitives. Mirrors design.md §3, §4, §5, §8.
   Used by archive.html and admin.html. index.html carries its own copy inline. */

:root {
  --bg:         oklch(0.20 0.045 265);
  --bg-lift:    oklch(0.26 0.040 265);
  --bg-rise:    oklch(0.31 0.036 265);
  --rule:       oklch(0.38 0.030 264);
  --ink-3:      oklch(0.62 0.028 262);
  --ink-2:      oklch(0.80 0.022 262);
  --ink:        oklch(0.95 0.012 265);
  --accent:     oklch(0.78 0.155 78);
  --accent-dim: oklch(0.62 0.115 78);
  --signal:     oklch(0.72 0.17 22);

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --util:    'IBM Plex Mono', ui-monospace, monospace;

  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 144px;

  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.grain {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 9vh, 140px); }

.eyebrow {
  font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s-5); display: flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before { content: ""; width: 8px; height: 1px; background: var(--accent); flex: none; }

.h-section {
  font-family: var(--display); font-variation-settings: 'wdth' 118;
  font-weight: 700; font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.02; letter-spacing: -0.015em; color: var(--ink);
  margin: 0 0 var(--s-6); max-width: 20ch; text-wrap: balance;
}
.h-sub {
  font-family: var(--display); font-variation-settings: 'wdth' 112;
  font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.prose { max-width: 68ch; text-wrap: pretty; margin: 0; }

.label {
  font-family: var(--util); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-2);
}

.btn {
  display: inline-block; font-family: var(--util); font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  padding: 14px 28px; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.btn.btn--primary { background: var(--accent); color: var(--bg); }
.btn.btn--primary:hover { background: var(--ink); }
.btn.btn--secondary { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn.btn--secondary:hover { background: var(--bg-rise); }
.btn.btn--sm { padding: 9px 18px; font-size: 0.6875rem; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.lnk {
  color: var(--ink); text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 0% 1px; padding-bottom: 0.15em;
  transition: background-size 160ms var(--ease);
}
.lnk:hover, .lnk:focus-visible { background-size: 100% 1px; }

.tag {
  display: inline-block; font-family: var(--util); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 10px 4px; border-radius: 2px; border: 1px solid transparent;
}
.tag.tag--verified { background: var(--accent); color: var(--bg); }
.tag.tag--partial  { background: var(--bg-rise); color: var(--ink-2); }
.tag.tag--lost     { background: transparent; border-color: var(--rule); color: var(--ink-3); }
.tag.tag--in-build { background: transparent; border-color: var(--rule); color: var(--ink-3); }
.tag.tag--unknown  { background: transparent; border-color: var(--rule); color: var(--ink-3); }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.topbar-in {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--s-3) var(--gutter);
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
}
.topbar-mark {
  font-family: var(--display); font-variation-settings: 'wdth' 118;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.topbar-nav { display: flex; gap: var(--s-5); }
.topbar-nav a {
  font-family: var(--util); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: color 160ms var(--ease), background-size 160ms var(--ease);
}
.topbar-nav a:hover, .topbar-nav a[aria-current] { color: var(--ink); background-size: 100% 1px; }

.field { display: grid; gap: var(--s-2); }
.field label {
  font-family: var(--util); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--bg-rise); border: 1px solid var(--rule); border-radius: 2px;
  padding: 10px 12px; width: 100%;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus { background: var(--bg-lift); }
.field textarea { min-height: 92px; resize: vertical; }

.footer { background: var(--bg-lift); border-top: 1px solid var(--rule); }
.footer-in {
  padding-block: var(--s-8) var(--s-7);
  font-family: var(--util); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:active { transform: none; }
}