:root {
  color-scheme: dark;

  /* Brand */
  --meng-bg: #0d0d0d;
  --meng-surface: #18181b;
  --meng-surface-raised: #222226;
  --meng-gold: #d4af37;
  --meng-gold-hover: #c9a227;
  --meng-gold-soft: rgba(212, 175, 55, 0.14);
  --meng-ivory: #f8f3e8;
  --meng-text: #f5f5f5;
  --meng-text-muted: #9ca3af;
  --meng-border: rgba(255, 255, 255, 0.08);
  --meng-overlay: rgba(0, 0, 0, 0.72);

  /* Semantic */
  --meng-success: #22c55e;
  --meng-warning: #f59e0b;
  --meng-error: #ef4444;
  --meng-focus: #f5cf59;

  /* Type */
  --meng-font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;

  /* Shape and motion */
  --meng-radius-sm: 8px;
  --meng-radius-md: 12px;
  --meng-radius-lg: 18px;
  --meng-radius-pill: 999px;
  --meng-duration-fast: 150ms;
  --meng-duration-normal: 220ms;
  --meng-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --meng-header-height: 60px;
  --meng-content-max: 1440px;
  --meng-gutter-mobile: 16px;
  --meng-gutter-desktop: 24px;
}

html {
  background: var(--meng-bg);
  color: var(--meng-text);
  font-family: var(--meng-font-sans);
}

body {
  background: var(--meng-bg);
  color: var(--meng-text);
}

::selection {
  background: var(--meng-gold);
  color: #111;
}

:focus-visible {
  outline: 2px solid var(--meng-focus);
  outline-offset: 3px;
}

.brand-logo {
  display: block;
  width: clamp(136px, 12vw, 170px);
  height: auto;
}

.brand-logo--footer {
  width: clamp(260px, 28vw, 420px);
  height: auto;
}

.brand-mark {
  display: block;
  width: clamp(96px, 24vw, 120px);
  height: auto;
}

.brand-accent {
  color: var(--meng-gold);
}

.brand-button-primary {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--meng-radius-md);
  background: var(--meng-gold);
  color: #111;
  font: 600 15px/1 var(--meng-font-sans);
  transition: background var(--meng-duration-fast) var(--meng-ease),
    transform var(--meng-duration-fast) var(--meng-ease);
}

.brand-button-primary:hover {
  background: var(--meng-gold-hover);
}

.brand-button-primary:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}