/* 小灵 AI点餐 · 基础变量 + reset + 工具类 */

:root {
  /* 纸色 */
  --bg-deep: #f5f0e8;
  --bg-surface: #fefcf7;
  --bg-card: #ffffff;
  --bg-glass: rgba(255,255,255,0.85);

  /* 边框 */
  --border-subtle: rgba(180,160,130,0.15);
  --border-default: rgba(180,160,130,0.25);
  --border-strong: rgba(160,140,110,0.45);

  /* 文字 */
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #a8a29e;
  --text-on-accent: #ffffff;

  /* 琥珀 */
  --accent: #ea580c;
  --accent-light: #f97316;
  --accent-soft: rgba(234,88,12,0.06);
  --accent-glow: rgba(234,88,12,0.20);

  --danger: #dc2626;
  --warning: #d97706;
  --success: #16a34a;

  /* 圆角 */
  --r-xs: 8px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 26px;
  --r-xl: 32px;
  --r-full: 9999px;

  /* 阴影 */
  --shadow-bubble: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
  --shadow: 0 6px 20px rgba(0,0,0,.07);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.10);
  --shadow-glow: 0 0 28px var(--accent-glow);

  --ease-spring: cubic-bezier(.22,1.2,.36,1);
  --ease-out: cubic-bezier(0,0,.18,1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 380ms;

  --font: "SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-tap-highlight-color:transparent;height:100%}

/* ═══════════ 纸纹微肌理背景 ═══════════ */
body{
  font-family:var(--font);
  background:
    repeating-conic-gradient(var(--bg-deep) 0% 25%,transparent 0% 50%) 50% / 2px 2px,
    var(--bg-deep);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  height:100dvh;overflow:hidden;overflow-x:hidden;
  position:fixed;inset:0;
  touch-action:pan-y;-webkit-overflow-scrolling:touch;
}
/* 琥珀光晕缓慢漂移 */
body::before{
  content:"";position:fixed;top:-30%;right:-20%;width:60vw;height:60vw;
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(234,88,12,.04),transparent 70%);
  animation:orbitDrift 30s linear infinite;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
}
@keyframes orbitDrift{
  0%{transform:translate(0,0)}
  25%{transform:translate(-20px,30px)}
  50%{transform:translate(10px,-20px)}
  75%{transform:translate(30px,10px)}
  100%{transform:translate(0,0)}
}

/* ═══════════ VIEWS ═══════════ */
.view{display:none;flex-direction:column;flex:1;overflow:hidden;height:100%}
.view:not(.hidden){display:flex}
#app{display:flex;flex-direction:column;height:100dvh;overflow:hidden;overflow-x:hidden;max-width:100vw}

.hidden{display:none!important}

/* ═══════════ UTILITY ═══════════ */
.text-accent{color:var(--accent)}.text-danger{color:var(--danger)}.text-muted{color:var(--text-muted)}
.text-center{text-align:center}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mb-1{margin-bottom:8px}