/* =============================================================================
   Chino's Blog — Base: reset, layout primitives, typography, components, reveal
 ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   2.  RESET & BASE
   ───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fz-md);
  line-height: var(--lh-normal);
  color: var(--color-foreground);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color var(--t-base), color var(--t-base);
}
a { color: var(--color-chino); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: hsl(var(--chino-600)); }
img, svg, video { max-width: 100%; height: auto; display: block; }
img { font-style: italic; }
ul, ol { list-style: none; }
button, input, textarea, select {
  font: inherit; color: inherit; background: none; border: none; outline: none;
}
button { cursor: pointer; }
hr { border: none; border-top: 1px solid var(--color-divider-soft); }

::selection { background: hsla(var(--chino), .22); color: var(--color-foreground); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  transition: outline-color var(--t-fast);
}
button:focus-visible, a:focus-visible { outline-offset: 3px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: hsla(var(--default-400), .5);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: hsla(var(--default-500), .6); background-clip: content-box; }

/* Background image layer (ChinoBlog style) — 低透明度、实色 tint */
.bg-layer {
  position: fixed; inset: 0; z-index: var(--z-bg);
  overflow: hidden; pointer-events: none;
}
.bg-layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: var(--bg-image-opacity);
  filter: saturate(.85) contrast(.95) brightness(1.02);
  transition: opacity var(--t-slow);
}
.bg-layer::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, hsla(var(--chino), .06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 100% 100%, hsla(var(--accent), .05) 0%, transparent 60%),
    hsla(var(--bg-tint), .86);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3.  LAYOUT PRIMITIVES
   ───────────────────────────────────────────────────────────────────────────── */
.container, .page, .wrap {
  width: 100%; max-width: var(--content-w); margin-inline: auto; padding-inline: 1rem;
}
@media (min-width: 640px) { .container, .page, .wrap { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container, .page, .wrap { padding-inline: 2rem; } }
.page { padding-block: 1.5rem; min-height: calc(100dvh - var(--nav-h) - 200px); }
.wrap { max-width: var(--reading-w); }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack-2 { --stack-gap: var(--space-2); } .stack-3 { --stack-gap: var(--space-3); }
.stack-4 { --stack-gap: var(--space-4); } .stack-6 { --stack-gap: var(--space-6); } .stack-8 { --stack-gap: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.grid { display: grid; gap: var(--grid-gap, var(--space-4)); }

.divider {
  height: 1px; width: 100%;
  background: linear-gradient(to right, transparent, var(--color-divider), transparent);
  margin-block: var(--space-8);
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(to right, hsl(var(--chino)), hsl(var(--accent)));
  z-index: var(--z-toast); transition: width .08s linear;
  pointer-events: none; box-shadow: 0 0 8px hsla(var(--chino), .5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4.  TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */
.display-1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw + 1rem, var(--fz-7xl)); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; color: var(--color-foreground); text-wrap: balance; }
.display-2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw + 1rem, var(--fz-5xl)); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: var(--color-foreground); text-wrap: balance; }
.heading { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.025em; color: var(--color-foreground); text-wrap: balance; }
.h1 { font-size: clamp(1.75rem, 2vw + 1rem, var(--fz-5xl)); font-weight: 800; line-height: 1.18; letter-spacing: -.03em; text-wrap: balance; }
.h2 { font-size: clamp(1.25rem, 1vw + 1rem, var(--fz-3xl)); font-weight: 700; line-height: 1.22; letter-spacing: -.02em; text-wrap: balance; }
.h3 { font-size: var(--fz-xl); font-weight: 700; line-height: 1.28; letter-spacing: -.015em; text-wrap: balance; }
.h4 { font-size: var(--fz-lg); font-weight: 600; line-height: 1.38; }
.h5 { font-size: var(--fz-base); font-weight: 600; line-height: 1.38; }
.h6 { font-size: var(--fz-sm); font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); }

.text-gradient {
  background: linear-gradient(135deg, hsl(var(--chino)) 0%, hsl(var(--ren)) 50%, hsl(var(--accent)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient-soft {
  background: linear-gradient(135deg, hsl(var(--chino)) 0%, hsl(var(--ren)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.text-xs { font-size: var(--fz-xs); } .text-sm { font-size: var(--fz-sm); }
.text-base { font-size: var(--fz-base); } .text-md { font-size: var(--fz-md); }
.text-lg { font-size: var(--fz-lg); }
.text-muted { color: var(--color-muted); } .text-subtle { color: var(--color-subtle); }
.text-foreground { color: var(--color-foreground); }
.text-chino { color: var(--color-chino); } .text-accent { color: var(--color-accent); }
.text-gold { color: var(--color-gold); }

.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; }
.font-mono { font-family: var(--font-mono); }

.tracking-tight { letter-spacing: -.02em; } .tracking-tighter { letter-spacing: -.035em; }
.tracking-wide { letter-spacing: .04em; }

.truncate-1, .truncate-2, .truncate-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.truncate-1 { -webkit-line-clamp: 1; } .truncate-2 { -webkit-line-clamp: 2; } .truncate-3 { -webkit-line-clamp: 3; }

/* ─────────────────────────────────────────────────────────────────────────────
   5.  COMPONENTS
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Button (soft-radius) ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 2.5rem; padding: 0 1.25rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans); font-size: var(--fz-sm); font-weight: 600;
  letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; user-select: none; text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-primary { background: hsl(var(--chino)); color: #fff; box-shadow: var(--shadow-chino); }
.btn-primary:hover { background: hsl(var(--chino-600)); color: #fff; box-shadow: 0 8px 24px hsla(var(--chino), .32); }
.btn-accent { background: hsl(var(--accent)); color: #fff; box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: hsl(var(--accent-600)); color: #fff; }
.btn-flat { background: hsla(var(--chino), .12); color: var(--color-chino); }
.btn-flat:hover { background: hsla(var(--chino), .2); }
.btn-accent-flat { background: hsla(var(--accent), .12); color: var(--color-accent); }
.btn-accent-flat:hover { background: hsla(var(--accent), .2); }
.btn-outline { background: transparent; color: var(--color-foreground); border-color: var(--color-border); }
.btn-outline:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.btn-ghost { background: transparent; color: var(--color-muted); }
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-foreground); }
.btn-gradient {
  background: linear-gradient(135deg, hsl(var(--chino)) 0%, hsl(var(--ren)) 100%);
  color: #fff; box-shadow: var(--shadow-chino); border: none;
}
.btn-gradient:hover { color: #fff; background: linear-gradient(135deg, hsl(var(--chino-600)) 0%, hsl(var(--ren-500)) 100%); box-shadow: 0 10px 26px hsla(var(--chino), .38); }

.btn-sm  { height: 2rem; padding: 0 .875rem; font-size: var(--fz-xs); }
.btn-lg  { height: 3rem; padding: 0 1.75rem; font-size: var(--fz-base); }
.btn-icon { width: 2.5rem; padding: 0; }
.btn-sm.btn-icon { width: 2rem; } .btn-lg.btn-icon { width: 3rem; }
.btn-danger { background: hsl(var(--danger)); color: #fff; }
.btn-danger:hover { background: hsl(var(--danger)); filter: brightness(.92); color: #fff; }

/* ── Icon button (soft-radius) ───────────────────────────────── */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-lg);
  color: hsl(var(--default-500)); background: transparent; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.icon-btn svg { width: 1.25rem; height: 1.25rem; }
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-foreground); }
.icon-btn.is-active { background: hsla(var(--chino), .12); color: var(--color-chino); border-color: hsla(var(--chino), .25); }
.icon-btn-sm { width: 2rem; height: 2rem; }
.icon-btn-sm svg { width: 1rem; height: 1rem; }

/* ── Card (solid surface, soft-radius) ────────────────────────── */
.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-divider-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--t-slow), transform var(--t-slow), border-color var(--t-base);
}
.card-hover { cursor: pointer; }
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: hsla(var(--chino), .25); }

.card-elevated { box-shadow: var(--shadow-md); }
.card-flat { box-shadow: none; }
.card-pad { padding: var(--space-6); }
.card-pad-sm { padding: var(--space-4); }
.card-pad-lg { padding: var(--space-8); }

/* side accent bar (category cards) */
.card-accent { position: relative; }
.card-accent::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--accent-color, hsl(var(--chino)));
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* ── Badge (soft-radius) ────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 1.5rem; padding: 0 .5rem;
  border-radius: var(--radius-md);
  font-size: var(--fz-xs); font-weight: 600; letter-spacing: .01em;
  background: var(--color-surface-2); color: hsl(var(--default-600));
  border: 1px solid var(--color-divider-soft);
}
.badge svg { width: .75rem; height: .75rem; }
.badge-chino    { background: hsla(var(--chino),    .12); color: var(--color-chino);    border-color: hsla(var(--chino),    .2); }
.badge-ren    { background: hsla(var(--ren),    .12); color: hsl(var(--ren-600)); border-color: hsla(var(--ren),    .2); }
.badge-accent { background: hsla(var(--accent), .12); color: var(--color-accent); border-color: hsla(var(--accent), .2); }
.badge-gold   { background: hsla(var(--gold),   .14); color: hsl(var(--gold-600));border-color: hsla(var(--gold),   .22); }
.badge-success{ background: hsla(var(--success),.12); color: hsl(var(--success));  border-color: hsla(var(--success),.2); }
.badge-warning{ background: hsla(var(--warning),.14); color: hsl(var(--warning));  border-color: hsla(var(--warning),.22); }
.badge-danger { background: hsla(var(--danger), .12); color: hsl(var(--danger));   border-color: hsla(var(--danger), .22); }
.badge-outline { background: transparent; border-color: var(--color-border); }

/* dot variant (kept circular — semantic) */
.badge-dot { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fz-xs); font-weight: 500; color: var(--color-muted); }
.badge-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dot-color, var(--color-chino));
  box-shadow: 0 0 0 3px hsla(var(--chino), .12);
}

/* ── Tag (chip, soft-radius) ────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: .3125rem;
  height: 1.75rem; padding: 0 .625rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2); color: hsl(var(--default-600));
  font-size: var(--fz-xs); font-weight: 500; text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tag svg { width: .875rem; height: .875rem; }
.tag:hover { background: hsl(var(--default-200)); color: var(--color-foreground); }
.tag-chino    { background: hsla(var(--chino),    .12); color: var(--color-chino); }
.tag-chino:hover    { background: hsla(var(--chino),    .2); }
.tag-accent { background: hsla(var(--accent), .12); color: var(--color-accent); }
.tag-accent:hover { background: hsla(var(--accent), .2); }
.tag-gold   { background: hsla(var(--gold),   .14); color: hsl(var(--gold-600)); }
.tag-outline { background: transparent; border-color: var(--color-border); }
.tag-outline:hover { background: var(--color-surface-2); }
.tag-sm { height: 1.375rem; padding: 0 .4375rem; font-size: 10px; }
.tag-lg { height: 2rem; padding: 0 .875rem; font-size: var(--fz-sm); }

/* ── Input / textarea / select (soft-radius) ──────────────────── */
.input, .textarea, .select {
  display: block; width: 100%; height: 2.5rem; padding: 0 .875rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-foreground); font-size: var(--fz-sm); font-family: var(--font-sans);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.textarea { height: auto; min-height: 6rem; padding: .625rem .875rem; line-height: var(--lh-normal); resize: vertical; }
.select {
  padding-right: 2.5rem; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='currentColor'><path d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'/></svg>");
  background-repeat: no-repeat; background-position: right .75rem center;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-border-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: hsl(var(--chino));
  box-shadow: 0 0 0 3px var(--color-ring); background: var(--color-surface);
}
.input::placeholder, .textarea::placeholder { color: var(--color-placeholder); }
.input-search { padding-left: 2.5rem; }

.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: var(--fz-sm); font-weight: 600; color: var(--color-foreground); }
.form-help  { font-size: var(--fz-xs); color: var(--color-muted); }

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb { width: 100%; margin-block: var(--space-4) var(--space-6); padding: 0; }
.breadcrumb-inner {
  width: 100%; margin-inline: 0; padding: 0 1rem;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--fz-sm); color: var(--color-muted);
  overflow: hidden;
}
.breadcrumb-inner > * { flex-shrink: 0; white-space: nowrap; }
.breadcrumb .crumb-current { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .breadcrumb-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .breadcrumb-inner { padding: 0 2rem; } }
.breadcrumb a { color: inherit; display: inline-flex; align-items: center; gap: .3125rem; }
.breadcrumb a:hover { color: var(--color-chino); }
.breadcrumb .crumb-sep { color: var(--color-subtle); display: inline-flex; }
.breadcrumb .crumb-sep svg { width: .875rem; height: .875rem; }
.breadcrumb .crumb-current { color: var(--color-foreground); font-weight: 600; }

/* ── Code (inline + block) ─────────────────────────────────── */
code, kbd, samp { font-family: var(--font-mono); font-size: .9em; }
code.inline, .chino-prose :not(pre) > code {
  background: hsla(var(--chino), .12); color: hsl(var(--chino-700));
  padding: .125rem .4375rem; border-radius: var(--radius-sm);
  font-size: .875em; font-weight: 500; border: 1px solid hsla(var(--chino), .12);
}
html.chino-dark code.inline, html.chino-dark .chino-prose :not(pre) > code {
  background: hsla(var(--chino), .25); color: hsl(var(--ren-200)); border-color: hsla(var(--chino), .3);
}
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .3125rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-bottom-width: 2px; border-radius: var(--radius-sm);
  font-size: var(--fz-xs); color: var(--color-foreground);
  box-shadow: 0 1px 0 var(--color-divider-soft);
}

/* ── Table ─────────────────────────────────────────────────── */
.chino-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fz-sm); background: var(--color-surface);
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--color-divider-soft); box-shadow: var(--shadow-xs);
}
.chino-table th, .chino-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-divider-soft); }
.chino-table th {
  font-size: var(--fz-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-muted); background: var(--color-surface-2);
}
.chino-table tbody tr:last-child td { border-bottom: none; }
.chino-table tbody tr:hover { background: var(--color-surface-2); }

/* ── Alert ─────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: hsla(var(--chino), .08); color: hsl(var(--chino-700));
  border: 1px solid hsla(var(--chino), .15); font-size: var(--fz-sm); line-height: var(--lh-normal);
}
.alert svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 2px; }
.alert-accent { background: hsla(var(--accent), .08); color: hsl(var(--accent-700)); border-color: hsla(var(--accent), .18); }
.alert-warning { background: hsla(var(--warning), .1); color: hsl(var(--warning)); border-color: hsla(var(--warning), .22); }
.alert-success { background: hsla(var(--success), .08); color: hsl(var(--success)); border-color: hsla(var(--success), .18); }

/* ── Skeleton ──────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-2) 0%, hsl(var(--default-200)) 50%, var(--color-surface-2) 100%);
  background-size: 200% 100%; border-radius: var(--radius-md);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── reveal animation for scroll-triggered elements ─────────────
   基础态在此定义，弹簧缓动与交错延迟在 effects.css 中增强覆盖。 */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }