/*
 * 劳小智公开 H5 共享 UI token。
 * 页面可以保留 light / dark 表面主题，但不得重新定义品牌与交互语义。
 * Canonical source: /docs/ui-system-guidelines.md
 */

:root {
  --ui-brand: #F2622E;
  --ui-brand-highlight: #FF7A45;
  --ui-brand-accent: #F59A2E;
  --ui-brand-action: #C9471B;
  --ui-brand-action-hover: #C44317;
  --ui-brand-action-pressed: #B93812;
  --ui-brand-soft: #FFF0E8;

  --ui-text-1: #10192A;
  --ui-text-2: #4D5965;
  --ui-text-3: #6B7785;
  --ui-text-4: #9AA5B4;
  --ui-bg: #EEF1F5;
  --ui-surface: #FFFFFF;
  --ui-bg-sunken: #EAEEF3;
  --ui-border: #DCE2EA;
  --ui-border-2: #E8ECF1;

  --ui-success: #0E9F6E;
  --ui-success-soft: #E7F6EF;
  --ui-success-on-dark: #34D399;
  --ui-warning: #F59E0B;
  --ui-warning-soft: #FEF3E2;
  --ui-danger: #E5484D;
  --ui-danger-soft: #FBE8E9;
  --ui-danger-action: #C7353B;
  --ui-danger-action-hover: #BD3037;
  --ui-danger-action-pressed: #B82D34;
  --ui-danger-on-dark: #FF8C82;
  --ui-info: #3B82F6;
  --ui-info-soft: #E8F1FE;
  --ui-info-on-dark: #7FB0FF;

  --ui-font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace, monospace;
  --ui-control-height: 44px;
  --ui-touch-target: 44px;
  --ui-radius-control: 10px;
  --ui-radius-button: 12px;
  --ui-radius-surface: 16px;
  --ui-focus: rgba(242, 98, 46, .5);
  --ui-motion-fast: 150ms;
  --ui-motion-base: 240ms;
  --ui-motion-slow: 300ms;
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  accent-color: var(--ui-brand);
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
label,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:root :where(button, a, input, textarea, select, summary, [role="button"]):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}

:root :where(button, input, textarea, select):disabled,
:root :where([role="button"])[aria-disabled="true"] {
  cursor: not-allowed;
}

::selection {
  background: rgba(242, 98, 46, .2);
  color: inherit;
}

.ui-touch-target {
  min-width: var(--ui-touch-target);
  min-height: var(--ui-touch-target);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}