/* UI tokens (CSS variables)
   Keep this file limited to :root custom properties.
   Theme overrides live in `cloud/assets/theme-neo.css`. */

:root{
  /* Palette (dark theme defaults) */
  --bg:#0b0f17;
  --panel:rgba(12,18,28,.78);
  --panel2:rgba(12,18,28,.55);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --line:rgba(148,163,184,.16);
  --accent:#30e3ca;
  --accent-2:#5ea1ff;
  --danger:#ff6b6b;

  /* Semantic aliases (themes may override) */
  --brand: var(--accent);
  --brand-weak: rgba(48,227,202,.12);
  --accent-2-weak: rgba(94,161,255,.16);
  --price: var(--accent);
  --surface: var(--panel);
  --surface-2: var(--panel2);
  --text-2: var(--muted);
  --text-3: rgba(148,163,184,.65);
  --border: var(--line);
  --divider: var(--line);

  /* Effects */
  --shadow:0 20px 60px rgba(0,0,0,.45);

  /* Motion */
  --ease-fast:.12s;
  --ease-default:.15s;
  --ease-slow:.2s;

  /* Radii */
  --radius-card:18px;
  --radius-field:12px;
  --radius-btn:16px;
  --r:var(--radius-card);
  --r2:var(--radius-field);

  /* Layers */
  --z-base:1;
  --z-nav:30;
  --z-overlay:80;
  --z-boot:120;

  /* Spacing */
  --gap-1:6px;
  --gap-2:10px;
  --gap-3:16px;
  --gap-4:24px;
  --gap:14px;

  /* Status pills (default dark theme) */
  --status-pill-bg: rgba(148,163,184,.12);
  --status-pill-border: var(--line);
  --status-pill-fg: var(--text);

  --st-new-bg: var(--status-pill-bg);
  --st-new-fg: #cfe1ff;
  --st-new-border: rgba(94,161,255,.45);

  --st-viewed-bg: var(--status-pill-bg);
  --st-viewed-fg: #cbd5e1;
  --st-viewed-border: rgba(148,163,184,.45);

  --st-updated-bg: var(--status-pill-bg);
  --st-updated-fg: #ffd5c6;
  --st-updated-border: rgba(255,138,101,.45);

  --st-waitpay-bg: var(--status-pill-bg);
  --st-waitpay-fg: #c6fff4;
  --st-waitpay-border: rgba(48,227,202,.55);

  --st-paid-bg: var(--status-pill-bg);
  --st-paid-fg: #ccecff;
  --st-paid-border: rgba(56,189,248,.45);

  --st-purchased-bg: var(--status-pill-bg);
  --st-purchased-fg: #c7f7d6;
  --st-purchased-border: rgba(34,197,94,.45);

  --st-done-bg: var(--status-pill-bg);
  --st-done-fg: #d1d5db;
  --st-done-border: rgba(100,116,139,.45);

  --st-cancelled-bg: var(--status-pill-bg);
  --st-cancelled-fg: #fca5a5;
  --st-cancelled-border: rgba(239,68,68,.45);

  /* Controls */
  --control-h:44px;
  --btn-h:44px;

  /* Layout */
  --maxw:760px;
  --nav-h:64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);

  /* Bottom navigation (Taobao-like) */
  --nav-icon-size: 22px;
  --nav-active: #FF5000;
  --nav-active-bg: rgba(255,80,0,0.10);
  --nav-inactive: var(--text-2);

  /* Typography */
  --font: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Viewport helper (set by JS on mobile) */
  --vh: 1vh;
}