/*
Theme Name: TechOneSpoon
Description: 테크한스푼 GeneratePress child theme — 토큰 기반 라이트/다크, Pretendard
Template: generatepress
Version: 0.1.0
*/

/* ── design tokens ─────────────────────────────────────────────── */
:root {
  --ts-bg: #faf9f7;
  --ts-surface: #ffffff;
  --ts-fg: #1c1917;
  --ts-muted: #78716c;
  --ts-border: #e7e5e4;
  --ts-accent: #b45309;        /* amber-700 — 꿀 한 스푼 */
  --ts-accent-soft: #fef3c7;   /* amber-100 */
  --ts-link: #92400e;
  --ts-radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ts-bg: #171412;
    --ts-surface: #211d1a;
    --ts-fg: #e7e5e4;
    --ts-muted: #a8a29e;
    --ts-border: #33302c;
    --ts-accent: #fbbf24;      /* amber-400 */
    --ts-accent-soft: #37301f;
    --ts-link: #fcd34d;
  }
}

/* ── base ──────────────────────────────────────────────────────── */
body {
  background: var(--ts-bg);
  color: var(--ts-fg);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -0.011em;
}

a { color: var(--ts-link); }
a:hover { color: var(--ts-accent); }

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ts-fg);
}

/* ── header ────────────────────────────────────────────────────── */
.site-header {
  background: var(--ts-bg);
  border-bottom: 1px solid var(--ts-border);
}

/* GP 동적 CSS가 :visited까지 지정해서 이긴다 — 상태 전부 명시 */
.main-title a,
.main-title a:visited,
.main-title a:hover {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--ts-fg);
}

.site-branding .main-title a::before {
  content: '🥄 ';
}

.site-description {
  color: var(--ts-muted);
  font-size: 0.85rem;
}

/* ── nav ───────────────────────────────────────────────────────── */
/* GP 동적 CSS(배경 #222 등)를 확실히 덮는다 */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation ul ul {
  background: var(--ts-bg) !important;
}

.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li a:visited {
  color: var(--ts-muted);
  font-weight: 600;
  font-size: 0.95rem;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-cat > a,
.main-navigation .main-nav ul li.sfHover > a {
  color: var(--ts-accent) !important;
  background: transparent !important;
}

.main-navigation .menu-toggle,
.main-navigation .mobile-menu-control-wrapper .menu-toggle {
  background: var(--ts-bg);
  color: var(--ts-fg);
}

/* ── content / cards ───────────────────────────────────────────── */
/* GP는 separate-containers 레이아웃에서 .inside-article/.widget에 흰 배경을
   직접 깐다 — 토큰으로 덮어야 다크모드가 산다 */
.separate-containers .inside-article,
.separate-containers .widget,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .container,
.inside-page-header {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
}

.entry-title a { color: var(--ts-fg); }
.entry-title a:hover { color: var(--ts-accent); }

.entry-meta,
.entry-meta a,
.posted-on,
.byline {
  color: var(--ts-muted);
  font-size: 0.82rem;
}

.cat-links a,
.tags-links a {
  display: inline-block;
  background: var(--ts-accent-soft);
  color: var(--ts-accent);
  border-radius: 999px;
  padding: 0.1em 0.75em;
  font-size: 0.8rem;
  font-weight: 600;
}

/* 본문 가독성 */
.entry-content > p { margin-bottom: 1.4em; }

.entry-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}
.entry-content th,
.entry-content td {
  border: 1px solid var(--ts-border);
  padding: 0.55em 0.8em;
}
.entry-content th { background: var(--ts-accent-soft); }

.entry-content blockquote {
  border-left: 3px solid var(--ts-accent);
  color: var(--ts-muted);
  background: var(--ts-surface);
}

.entry-content code {
  background: var(--ts-accent-soft);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
}

.entry-content pre {
  background: #1c1917;
  color: #e7e5e4;
  border-radius: var(--ts-radius);
  padding: 1em 1.2em;
  overflow-x: auto;
}

/* ── footer ────────────────────────────────────────────────────── */
.site-footer,
.site-info {
  background: var(--ts-bg);
  color: var(--ts-muted);
  border-top: 1px solid var(--ts-border);
  font-size: 0.82rem;
}
.site-info a { color: var(--ts-muted); }

/* ── read button 등 ────────────────────────────────────────────── */
.read-more,
button, .button,
input[type='submit'] {
  background: var(--ts-accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
button:hover, .button:hover, .read-more:hover {
  background: var(--ts-link);
  color: #fff;
}