/* ============================================================
 * PostLoop · Design Tokens (C1)
 * Linear-purple 风: 工程师向, 紫色品牌 + slate 灰阶
 * ============================================================ */

:root {
  /* ---------- Color: 背景层 ---------- */
  --color-bg:        #ffffff;
  --color-bg-subtle: #f8fafc;   /* slate-50 */
  --color-bg-muted:  #f1f5f9;   /* slate-100 */
  --color-bg-hover:  #f8fafc;

  /* ---------- Color: 文字层 ---------- */
  --color-text:        #0f172a; /* slate-900 */
  --color-text-muted:  #475569; /* slate-600 */
  --color-text-subtle: #94a3b8; /* slate-400 */
  --color-text-inverse: #ffffff;

  /* ---------- Color: 边框 ---------- */
  --color-border:        #e2e8f0; /* slate-200 */
  --color-border-strong: #cbd5e1; /* slate-300 */
  --color-border-focus:  var(--color-brand);

  /* ---------- Color: 品牌 (Linear violet) ---------- */
  --color-brand:        #7c3aed; /* violet-600 */
  --color-brand-hover:  #6d28d9; /* violet-700 */
  --color-brand-active: #5b21b6; /* violet-800 */
  --color-brand-subtle: #ede9fe; /* violet-100 */
  --color-brand-muted:  #f5f3ff; /* violet-50 */
  --color-brand-text:   #4c1d95; /* violet-900 */

  /* ---------- Color: 语义 ---------- */
  --color-success:        #16a34a;
  --color-success-subtle: #dcfce7;
  --color-success-text:   #15803d;

  --color-warning:        #d97706;
  --color-warning-subtle: #fef3c7;
  --color-warning-text:   #92400e;

  --color-danger:         #dc2626;
  --color-danger-subtle:  #fee2e2;
  --color-danger-text:    #991b1b;

  --color-info:           #2563eb;
  --color-info-subtle:    #dbeafe;
  --color-info-text:      #1e40af;

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas",
               ui-monospace, monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ---------- Shadow ---------- */
  --shadow-sm:    0 1px 2px 0 rgba(15, 23, 42, .04);
  --shadow-md:    0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .04);
  --shadow-lg:    0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .04);
  --shadow-focus: 0 0 0 3px rgba(124, 58, 237, .18);

  /* ---------- Layout ---------- */
  --max-w:   1100px;
  --max-w-narrow: 720px;
  --nav-h:   54px;

  /* ---------- Transition ---------- */
  --t-fast:   120ms ease;
  --t-normal: 200ms ease;
}

/* ============================================================
 * Reset + Base Typography
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3) 0;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-3) 0; }

a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--color-brand-hover); text-decoration: underline; }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--color-bg-muted);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--color-brand-text);
}

pre {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  overflow-x: auto;
  line-height: var(--leading-snug);
}

blockquote {
  border-left: 3px solid var(--color-brand);
  margin: var(--space-3) 0;
  padding: var(--space-1) var(--space-4);
  color: var(--color-text-muted);
  background: var(--color-brand-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ============================================================
 * Layout: 主容器
 * ============================================================ */

.app-shell {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-12);
}

/* ============================================================
 * Top Nav
 * ============================================================ */

.app-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
}

.app-nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: var(--space-2);
}

.app-nav-brand {
  font-weight: var(--font-bold);
  font-size: var(--text-md);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  margin-right: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.app-nav-brand:hover { color: var(--color-text); text-decoration: none; }
.app-nav-brand-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-brand) 0%, #a78bfa 100%);
}

.app-nav-links {
  display: flex;
  gap: var(--space-1);
  flex: 1;
}

.app-nav-link {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.app-nav-link:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
  text-decoration: none;
}
.app-nav-link.active {
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
}

.app-nav-right {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}