/* Yue Design public-site tokens.
 * Loaded by the official site and mirrored public surfaces. The semantic
 * action/surface/text values match YueBoard and YueLink; public pages keep
 * their own comfortable density and responsive type scale.
 */

:root {
  /* ===== Zinc neutral ramp ===== */
  --ink-900: #09090b;
  --ink-800: #18181b;
  --ink-700: #27272a;
  --ink-600: #3f3f46;
  --mist-50:  #fafafa;
  --mist-100: #f4f4f5;
  --mist-200: #e4e4e7;
  --fog-700:  #52525b;
  --fog-500:  #71717a;
  --fog-300:  #a1a1aa;
  --brand:        #4f46e5;
  --brand-strong: #4338ca;
  --brand-soft:   #a5b4fc;
  /* Filled actions need a dark-enough surface for white text. Keep this
   * separate from accent text, which becomes lighter on dark canvases. */
  --action-fill:        #4f46e5;
  --action-fill-hover:  #4338ca;
  --accent:       #7c3aed;

  /* ===== Theme aliases (light default) ===== */
  --bg: var(--mist-50);
  --surface: #ffffff;
  --surface-soft: var(--mist-50);
  --surface-frame: rgba(255, 255, 255, 0.85);
  --text: var(--ink-900);
  --muted: var(--fog-700);
  --subtle: var(--fog-500);
  --line: rgba(9, 9, 11, 0.08);
  --line-soft: rgba(9, 9, 11, 0.04);
  --line-strong: var(--mist-200);

  /* ===== Radius scale (Yue 2026 shared scale, public-site window) =====
   * Members are fixed across all Yue surfaces: 4 / 6 / 8 / 12 / 16 / 20 / 24
   * / 32 / pill. Each surface picks a contiguous window; the site sits high
   * because it is a marketing surface. Never invent an off-scale value. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* ===== Space scale (4px grid, shared) ===== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ===== Semantic state colours (shared 600/light · 400/dark pair) ===== */
  --state-success: #16a34a;
  --state-warning: #d97706;
  --state-danger: #dc2626;
  /* 文字专用色阶: 600 级语义色压在自身 10-15% 淡底上对比度不达标(实测
     2.6-3.7:1), 浅色主题文字用 800 级(实测 ≥5.9:1)。同用于 .sev-block
     的紫阶。 */
  --state-success-text: #166534;
  --state-warning-text: #92400e;
  --state-danger-text: #b91c1c;
  --accent-badge-bg: rgba(124, 58, 237, 0.12);
  --accent-badge-text: #5b21b6;
  --state-info: #2563eb;

  /* ===== Motion (shared: three durations, two curves) ===== */
  --motion-fast: 100ms;
  --motion-base: 150ms;
  --motion-slow: 250ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== Type scale (breakpoint-driven, no vw) =====
   * UI-tier sizes are members of the shared Yue scale (11/12/13/14/16/18/20/
   * 24/30/36). Only `--fs-display` is exempt: a marketing hero legitimately
   * ramps past the UI ceiling, and no other surface renders one.
   * `--fs-h2` used to be non-monotonic — 32px at base but 30px from 640px up,
   * so section headings got *smaller* as the viewport grew. Now 24 → 30 → 36. */
  --fs-display: 44px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-meta: 12px;

  /* Weight ladder, shared: 400 body · 500 label · 600 title · 700 display.
   * Nothing above 700 — 800/900 on a system UI stack renders as a heavier
   * synthetic face on the platforms without that weight, and reads as shout. */
  --fw-display: 700;
  --fw-heading: 600;
  --fw-emphasis: 600;
  --fw-label: 500;
  --fw-body: 400;

  /* ===== Shadow scale ===== */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(9, 9, 11, 0.08);
  --shadow-hero: 0 32px 80px rgba(9, 9, 11, 0.12);
  --shadow-glow: 0 0 0 1px var(--brand) inset, 0 12px 40px color-mix(in srgb, var(--brand) 35%, transparent);

  /* ===== Layout ===== */
  --max: 1200px;
  --gutter: 28px;

  /* ===== Font stack (system, no external download) ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  color-scheme: light;
}

@media (min-width: 640px) {
  :root {
    --fs-display: 52px;
    --fs-h2: 30px;
    --gutter: 36px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 60px;
    --fs-h2: 36px;
    --gutter: 48px;
  }
}

@media (min-width: 1280px) {
  :root {
    --fs-display: 64px;
  }
}

@media (min-width: 1440px) {
  :root {
    --fs-display: 72px;
  }
}

[data-theme="dark"] {
  --bg: #09090b;
  /* Dark elevation is expressed by SURFACE LIGHTNESS + a 1px line, not by a
   * shadow (Yue 2026 §Dark). These were translucent (rgba(24,24,27,.88)) so a
   * card's real colour depended on whatever gradient happened to sit behind
   * it — the same card read as three different greys down one page, and body
   * text lost contrast wherever the halo showed through. Now opaque, and
   * identical to the panel/app ramp: canvas #09090b → raised #18181b →
   * subtle #27272a. */
  --surface: #18181b;
  --surface-soft: #27272a;
  /* Deliberately still translucent: `--surface-frame` is used by exactly one
   * thing, the hero's frosted app-window mock (`.mock`), which floats over the
   * hero gradient with a real `backdrop-filter`. The "surfaces are opaque" rule
   * governs *resting* surfaces sitting on canvas; a floating hero visual is the
   * case translucency is actually for. */
  --surface-frame: rgba(24, 24, 27, 0.92);
  --text: #fafafa;
  --muted: #a1a1aa;
  /* #71717a misses 4.5:1 on every dark Yue surface (#09090b/#18181b/#27272a).
   * Small metadata is still secondary, but must remain readable. */
  --subtle: #a1a1aa;
  --line: #3f3f46;
  --line-soft: #27272a;
  --line-strong: #52525b;
  --brand: #6366f1;
  --brand-strong: #818cf8;
  --brand-soft: #c7d2fe;
  /* 🚨 --accent 此前是这块里**唯一漏掉的**品牌色: brand / brand-strong /
   * brand-soft 三个都按深色重定义了, 它没有, 于是深色下仍是浅色档的
   * violet-600 (#7c3aed)。它最显眼的消费者 `.tile-eyebrow` 是一条
   * background-clip:text 的渐变文字, 深色端正好取 --accent ——
   * #7c3aed 压在 Yue 的三种深色面上只有 3.49 / 3.11 / **2.61:1**,
   * 而它是 12px 大写字距展开的小标签, 按 AA 要 4.5。
   * violet-400 (#a78bfa) 给到 7.31 / 6.51 / 5.47:1, 而且它本来就已经在这块里
   * 当 --accent-badge-text 用了 —— 是同一个决定漏接了一根线, 不是新配色。 */
  --accent: #a78bfa;
  --action-fill: #4f46e5;
  --action-fill-hover: #4338ca;
  --state-success: #4ade80;
  --state-warning: #fbbf24;
  --state-danger: #f87171;
  --state-success-text: var(--state-success);
  --state-warning-text: var(--state-warning);
  /* danger 400 压在 15% danger 淡底上仍只有 4.29:1；300 阶达 4.5:1。 */
  --state-danger-text: #fca5a5;
  --accent-badge-bg: rgba(139, 92, 246, 0.15);
  --accent-badge-text: #a78bfa;
  --state-info: #60a5fa;
  /* Resting cards: no drop shadow in dark. Only the hero keeps one, because
   * it floats a product mock over a gradient rather than sitting on canvas. */
  --shadow-card: none;
  --shadow-hero: 0 40px 100px rgba(0, 0, 0, 0.9);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}