/* LegalTech CC — Brand V1.0 Tokens
 * Source of truth: /brand/index.html (V1.0 · 2026.08)
 * Used by all prototype pages. In production, this file moves to /assets/tokens.css
 * and is imported by /assets/site.css.
 *
 * v1.1 — 紧凑化档位；brand-mark 改为 <img> 引用；新增 nav-dropdown
 */
@font-face {
  font-family: "LTCC Source Han Serif";
  src: url("../assets/fonts/SourceHanSerifSC-VF.otf.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "LTCC Source Han Sans";
  src: url("../assets/fonts/SourceHanSansSC-VF.otf.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --ink: #101416;
  --ink-2: #1d2526;
  --paper: #f7f7f3;
  --paper-2: #edeeea;
  --line: #d5d9d5;
  --muted: #65706e;
  --jade: #25c49b;
  --mint: #a7edcb;
  --emerald-deep: #07926f;
  --emerald-mid: #1ec197;
  --teal: #0b7465;
  --teal-deep: #064f49;
  --danger: #c44e4e;
  --warning: #b98709;
  --info: #327b96;
  --success: #168a67;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --shadow-soft: 0 14px 32px rgba(16, 20, 22, .07);
  --shadow-crisp: 0 1px 0 rgba(16, 20, 22, .08);
  --shadow-card: 0 6px 18px rgba(16, 20, 22, .05);

  /* 紧凑档位 — 全站围绕此收紧 */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;       /* 原 24 */
  --space-6: 24px;       /* 原 32 */
  --space-7: 32px;       /* 原 48 */
  --space-8: 48px;       /* 原 64 */
  --space-9: 72px;       /* 原 96 */

  --max: 1180px;
  --max-wide: 1520px;

  --sans: "LTCC Source Han Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: "LTCC Source Han Serif", "Songti SC", "Noto Serif CJK SC", serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Type scale — 略收 */
  --t-display: clamp(42px, 6vw, 78px);
  --t-h1: clamp(32px, 4.4vw, 54px);
  --t-h2: clamp(24px, 3vw, 36px);
  --t-h3: clamp(18px, 1.8vw, 22px);
  --t-body: 15.5px;
  --t-small: 14px;
  --t-eyebrow: 11.5px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-synthesis: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--teal);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--emerald-deep);
}

:focus-visible {
  outline: 3px solid rgba(37, 196, 155, .5);
  outline-offset: 3px;
  border-radius: 4px;
}

button {
  font: inherit;
  cursor: pointer;
}

/* 字体规范：页面主标题使用思源宋体 Heavy；正文和界面文字使用思源黑体 Light。
 * 仅覆盖信息层级中的 display / page-title 级别，避免表格和卡片标题过度书写化。 */
.dark-hero h1,
.tr-hero h1,
.tools-hero h1,
.tutorials-hero h1,
.about-hero h1,
.course-hero h1,
.daily-hero h1,
.md-page h1,
.prototype-page h1 {
  font-family: var(--serif);
  font-weight: 900;
  text-wrap: pretty;
}

.workbench-heading h2,
.warm-intro h2 {
  font-family: var(--serif);
  font-weight: 900;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  color: var(--teal);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shell {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.shell-wide {
  width: min(var(--max-wide), calc(100% - 32px));
  margin: 0 auto;
}

/* Topbar — 紧凑 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 760;
  text-decoration: none;
}

/* brand-mark 现在是 <img> — 引用 Brand V1.0 的翡翠渐变图形标 */
.brand-mark {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.brand small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Nav — 紧凑 + hover dropdown */
.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.nav a,
.nav .dropdown-trigger {
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.nav a:hover,
.nav .dropdown-trigger:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.nav a.is-active {
  background: var(--paper-2);
  color: var(--ink);
}

/* Dropdown 容器 */
.nav-dropdown {
  position: relative;
}

.dropdown-trigger::after {
  content: "▾";
  margin-left: 4px;
  font-size: 10px;
  color: var(--muted);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 240px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: none;
  z-index: 30;
}

.nav-dropdown:has(.dropdown-trigger[aria-expanded="true"]) > .dropdown-panel {
  display: grid;
  gap: 2px;
}

.dropdown-panel a {
  display: grid;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

.dropdown-panel a small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.dropdown-panel a:hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(16, 20, 22, .15);
  color: var(--paper);
}

.button.jade {
  background: linear-gradient(135deg, var(--emerald-deep), var(--emerald-mid));
  border-color: transparent;
  color: #fff;
}

.button.jade:hover {
  color: #fff;
  box-shadow: 0 10px 24px rgba(7, 146, 111, .32);
}

.button.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.button.ghost:hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* Page footer — 紧凑 */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--space-8);
  padding: 24px 0 32px;
  color: var(--muted);
  font-size: 13.5px;
}

.site-footer .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.site-footer .row > span {
  min-width: 0;
  flex: 1 1 auto;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink);
}

.site-footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer .operator {
  display: inline;
  margin-top: 0;
}

.site-footer .operator::before {
  display: block;
  height: 5px;
  content: "";
}

.site-footer .filings {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 0 10px;
  vertical-align: middle;
  white-space: nowrap;
}

.site-footer .police-filing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.site-footer .police-filing img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

@media (max-width: 820px) {
  .site-footer .operator {
    display: block;
    margin-top: 5px;
  }

  .site-footer .operator::before {
    display: none;
  }

  .site-footer .filings {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0 0;
    white-space: normal;
  }
}

/* Mobile */
@media (max-width: 820px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .nav a,
  .nav .dropdown-trigger {
    white-space: nowrap;
  }
  /* mobile 下拉：用 details/summary 也行，但保留结构稳定，仅让面板横向延展 */
  .dropdown-panel {
    right: auto;
    left: 0;
    min-width: 180px;
    max-width: calc(100vw - 32px);
  }
}

@media (max-width: 540px) {
  .button {
    width: 100%;
  }
  /* 小屏 hero 字号降一档，避免溢出 */
  .hero h1,
  .tr-hero h1,
  .tools-hero h1,
  .tutorials-hero h1,
  .about-hero h1 {
    font-size: clamp(30px, 8vw, 44px);
  }
}

/* 全局占位标记（Phase 1 原型阶段，链接/仓库/数据尚未实装） */
/* 匹配 <a> 和 <span>，并兼容 aria-disabled="true" */
a.is-placeholder,
span.is-placeholder,
a[aria-disabled="true"],
span[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
a.is-placeholder,
a[aria-disabled="true"] {
  pointer-events: none;
  text-decoration: line-through wavy rgba(11, 116, 101, 0.4);
}
a.is-placeholder:hover,
a[aria-disabled="true"]:hover {
  color: inherit;
  text-decoration: none;
}