/* ==========================================================================
   LNE 外贸工作台 — Apple-inspired design system
   Cross-platform: macOS (Safari/Chrome) + Windows (Edge/Chrome)
   Strategy: identical visual language on both OS.
     · Font stack: system UI fonts, SF on macOS / Segoe UI Variable on Windows.
     · Letter-spacing is applied per-OS because Segoe UI needs less optical
       tightening than SF Pro at the same size.
     · Scrollbars: custom thin overlay-style on macOS, solid slim on Windows.
     · backdrop-filter always double-prefixed (-webkit- + unprefixed).
     · Color-mix / :has() avoided or given safe fallbacks for older Edge.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* One family on macOS and Windows. Local files first; system faces only if they fail. */
  --font-ui:
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",
    "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono:
    "SF Mono", ui-monospace, SFMono-Regular, "JetBrains Mono", "Cascadia Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  /* Color — Apple's neutral ladder, not blue-gray. #1d1d1f ink on #f5f5f7. */
  --ink: #1d1d1f;
  --ink-2: #3a3a3c;
  --muted: #636366;          /* AA-safe on white: 6.0:1 */
  --muted-2: #6e6e73;        /* AA-safe on white: 5.1:1 */
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #fafafa;

  /* Accent — Apple's system blue. Hover/active steps mirror Apple's ramp. */
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-active: #006edb;
  --accent-ink: #0059a8;     /* 6.4:1 on --accent-soft */
  --accent-soft: #e8f1fb;
  --accent-softer: #f2f7fd;

  /* Status colors, tuned to Apple's semantic palette */
  --amber: #b25000;
  --amber-soft: #fff4e5;
  --amber-line: #ffd8a8;
  --red: #c9341b;
  --red-soft: #fdf0ee;
  --red-line: #f8cdc7;
  --green: #1d7a44;
  --green-soft: #eaf7ef;
  --teal: #0071e3;
  --teal-soft: #e8f1fb;

  /* Radii — Apple's scale: pills for actions, generous cards, soft chips */
  --r-pill: 980px;
  --r-card: 18px;
  --r-panel: 20px;
  --r-input: 10px;
  --r-chip: 980px;
  --r-small: 8px;

  /* Shadows — same stack on macOS and Windows. Wide, tinted, and visible. */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.08);
  --sh-2: 0 14px 36px rgba(15, 23, 42, 0.14), 0 3px 10px rgba(15, 23, 42, 0.06);
  --sh-3: 0 22px 56px rgba(15, 23, 42, 0.18), 0 6px 16px rgba(15, 23, 42, 0.08);
  --sh-pop: 0 36px 90px rgba(15, 23, 42, 0.28), 0 10px 24px rgba(15, 23, 42, 0.12);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.74);
  --glass-line: rgba(255, 255, 255, 0.72);
  --glass-blur: saturate(180%) blur(28px);

  /* Motion — Apple's easing. Fast, decelerating, never bouncy. */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 0.18s;
  --t: 0.28s;
  --t-slow: 0.5s;

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --gap: 20px;
  --pad: 32px;
}

/* Chinese body stays at 0. Large titles tighten once, on both systems. */
:root {
  --tracking-body: 0;
  --tracking-tight: -0.02em;
  --tracking-nav: 0.02em;
}

:root {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface-2);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: var(--tracking-body, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface-2);
  color: var(--ink);
  /* Prevent iOS-style rubber banding artefacts in dialogs */
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; letter-spacing: inherit; }

button, a, input, select, textarea, summary {
  outline-offset: 3px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

button, a { touch-action: manipulation; }

::selection { background: rgba(0, 113, 227, 0.18); }

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