/* variables.css - Base layer: CSS custom properties & global animations */

:root {
  --sidebar-bg:     #0f172a;
  --sidebar-hover:  #1e293b;
  --sidebar-active: #1d4ed8;
  --accent:         #3b82f6;
  --accent-light:   #dbeafe;
  --bg:             #f1f5f9;
  --white:          #ffffff;
  --border:         #e2e8f0;
  --border-light:   #f1f5f9;
  --text:           #1e293b;
  --text-muted:     #64748b;
  --text-faint:     #94a3b8;
  --green:          #22c55e;
  --green-bg:       #f0fdf4;
  --yellow:         #f59e0b;
  --yellow-bg:      #fffbeb;
  --red:            #ef4444;
  --purple:         #8b5cf6;
  --purple-bg:      #f5f3ff;
  --panel-hd:       52px;
  --radius:         8px;

  /* sidebar white transparent scale */
  --sidebar-text:       rgba(255,255,255,0.8);
  --sidebar-text-hover: rgba(255,255,255,0.6);
  --sidebar-text-faint: rgba(255,255,255,0.35);
  --sidebar-active-bg:  rgba(255,255,255,0.08);
  --sidebar-border:     rgba(255,255,255,0.1);
  --sidebar-input-bg:   rgba(255,255,255,0.06);
  --sidebar-input-focus-bg: rgba(255,255,255,0.09);
  --sidebar-divider:    rgba(255,255,255,0.12);
  --sidebar-count-bg:   rgba(255,255,255,0.25);

  /* accent blue transparent scale */
  --accent-05: rgba(59,130,246,0.05);
  --accent-15: rgba(59,130,246,0.15);
  --accent-20: rgba(59,130,246,0.2);
  --accent-25: rgba(59,130,246,0.25);
  --accent-30: rgba(59,130,246,0.3);
  --accent-35: rgba(59,130,246,0.35);
  --accent-50: rgba(59,130,246,0.5);

  /* extended semantic colors */
  --green-light:   #dcfce7;
  --green-dark:    #15803d;
  --red-dark:      #991b1b;
  --red-darker:    #b91c1c;
  --yellow-light:  #fef9c3;
  --yellow-faint:  #fef08a;
  --yellow-lighter:#fffbe6;
  --orange-dark:   #b45309;
  --orange-darker: #a16207;
  --purple-light:  #ede9fe;

  /* common helper colors */
  --blue-bg:       #eff6ff;
  --blue-border:   #bfdbfe;
  --blue-dark:     #1e40af;
  --gray-bg:       #f8fafc;
  --gray-bg-alt:   #f3f4f6;
  --gray-border:   #e0eaff;
  --gray-darker:   #6b7280;
  --gray-dark:     #374151;
  --black-04:      rgba(0,0,0,.04);
  --black-08:      rgba(0,0,0,.08);

  --accent-hover: #2563eb;
  --red-hover: #dc2626;
  --red-bg: #fef2f2;
  --red-text: #c62828;
  --red-border: #fca5a5;
  --yellow-text: #f9a825;
  --green-text: #22c55e;
  --purple-text: #7c3aed;
  --purple-border: #ddd6fe;
  --orange-bg: #ffedd5;
  --orange-text: #d97706;
  --blue-text: #0369a1;
  --cyan: #06b6d4;
  --orange: #f97316;
  --code-bg: #e0e7ff;
  --bg-2: var(--code-bg);
  --code-text: #4338ca;
  --border-hover: #93c5fd;
  --shadow: rgba(0,0,0,.15);
  --overlay: rgba(15,23,42,.5);
  --glass: rgba(255,255,255,.15);

  --slate-dark:    #334155;
  --slate:         #475569;
  --slate-light:   #94a3b8;
  --slate-300:     #cbd5e1;
  --gray-mid:      #9ca3af;
  --gray-light:    #e5e7eb;
  --cyan-dark:     #0891b2;
  --green-pale:    #b7eb8f;
  --orange-deep:   #c2410c;
  --red-pale:      #ffccc7;
  --yellow-warn:   #fffbeb;
  --amber-dark:    #92400e;
  --indigo:        #6366f1;

  /* misc badge/shadow colors */
  --black-10:        rgba(0,0,0,.10);
  --black-30:        rgba(0,0,0,.30);
  --white-50:        rgba(255,255,255,0.5);
  --white-22:        rgba(255,255,255,0.22);
  --white-95:        rgba(255,255,255,0.95);
  --orange-soft-bg:     #fff7ed;
  --orange-soft-border: #fed7aa;
  --sky-bg:          #e0f2fe;
  --yellow-pale:     #fef3c7;
  --amber-pale:      #fde68a;
  --green-pale-bg:   #e6f4ea;
  --green-pale-text: #137333;
  --yellow-cream-bg: #fef7e0;
  --amber-strong:    #fbbf24;
  --emerald:         #4ade80;
  --rose:            #f87171;
  --sky:             #60a5fa;
  --red-faint-bg:    rgba(220,53,69,.04);
}

/* ══════════════════════════════════════════════════
   Shadow System
   ══════════════════════════════════════════════════ */
:root {
  --shadow-sm: 0 1px 3px var(--shadow);
  --shadow-md: 0 4px 16px var(--shadow);
  --shadow-lg: 0 20px 60px var(--shadow);
}

/* ══════════════════════════════════════════════════
   Font Size System
   ══════════════════════════════════════════════════ */
:root {
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-base: 13px;
  --fs-lg: 14px;
  --fs-xl: 16px;
}

/* ══════════════════════════════════════════════════
   全局重置（Reset & Normalize）
   ══════════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

/* ── <a> 标签用作可点击行时的全局重置 ── */
a.site-item, a.site-card,
a.cat-l1-info, a.cat-l2-item,
a.lp-item, a.aip-group-item,
a.cat-all-item, a.sidebar-btn,
a.sidebar-tab,
a.btn, a.btn-sm, a.btn-lg {
  text-decoration: none;
  outline: none;
}
a.site-item      { display: flex;  color: var(--text-faint); }
a.site-card      { display: block; color: inherit; }
a.cat-l1-info    { display: block; color: inherit; }
a.cat-l2-item    { display: flex;  color: inherit; }
a.lp-item        { display: block; color: inherit; }
a.aip-group-item { display: flex;  color: inherit; }

/* ══════════════════════════════════════════════════
   全局动画
   ══════════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }