/* ============================================
   餐谋 Canmore v1.0 - Common Styles
   ============================================ */

@import './variables.css';

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:16px;-webkit-font-smoothing:antialiased}

body{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  color:var(--text-primary);
  background:var(--bg-primary);
  line-height:1.6;
  min-height:100vh;
}

a{color:var(--text-link);text-decoration:none}
a:hover{opacity:0.85}

button{
  font-family:var(--font-sans);
  cursor:pointer;
  border:none;
  background:none;
  outline:none;
  font-size:inherit;
}

input,textarea,select{
  font-family:var(--font-sans);
  font-size:inherit;
  border:none;
  outline:none;
  background:none;
}

ul,ol{list-style:none}

img{max-width:100%;display:block}

/* ── Typography ── */
.number{
  font-family:var(--font-number);
  font-weight:700;
}

.headline{font-size:var(--text-3xl);font-weight:700;letter-spacing:-0.02em}
.title{font-size:var(--text-2xl);font-weight:700}
.subtitle{font-size:var(--text-lg);font-weight:600}
.body-text{font-size:var(--text-base);line-height:1.7}
.caption{font-size:var(--text-xs);color:var(--text-secondary)}

/* ── Buttons ── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 20px;
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:600;
  transition:all var(--transition);
  white-space:nowrap;
  user-select:none;
}
.btn-primary{
  background:var(--brand-600);
  color:var(--text-inverse);
}
.btn-primary:hover{background:var(--brand-700)}
.btn-secondary{
  background:var(--bg-card);
  color:var(--text-primary);
  border:1px solid var(--border-light);
}
.btn-secondary:hover{background:var(--bg-hover)}
.btn-ghost{color:var(--text-secondary)}
.btn-ghost:hover{color:var(--text-primary);background:var(--bg-hover)}
.btn-sm{padding:6px 12px;font-size:var(--text-xs)}
.btn-lg{padding:12px 24px;font-size:var(--text-md)}
.btn-icon{
  width:40px;height:40px;padding:0;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);font-size:20px;
}
.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary)}

/* ── Cards ── */
.card{
  background:var(--bg-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--space-xl);
}
.card-warm{background:var(--bg-card)}

/* ── Inputs ── */
.input{
  width:100%;
  padding:10px 14px;
  border-radius:var(--radius-md);
  background:var(--bg-input);
  color:var(--text-primary);
  font-size:var(--text-base);
  border:1px solid transparent;
  transition:border-color var(--transition);
}
.input:focus{border-color:var(--brand-500);background:var(--bg-white)}
.input::placeholder{color:var(--text-tertiary)}

.textarea{
  width:100%;
  padding:12px 16px;
  border-radius:var(--radius-lg);
  background:var(--bg-input);
  color:var(--text-primary);
  font-size:var(--text-base);
  resize:none;
  border:1px solid transparent;
  transition:border-color var(--transition);
  line-height:1.6;
}
.textarea:focus{border-color:var(--brand-500);background:var(--bg-white)}

/* ── Badges / Tags ── */
.badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:600;
}
.badge-green{background:var(--status-green-bg);color:var(--status-green)}
.badge-yellow{background:var(--status-yellow-bg);color:var(--status-yellow)}
.badge-red{background:var(--status-red-bg);color:var(--status-red)}
.badge-brand{background:var(--brand-100);color:var(--brand-700)}

/* ── Status Dots ── */
.dot{width:10px;height:10px;border-radius:var(--radius-full);flex-shrink:0}
.dot-green{background:var(--status-green)}
.dot-yellow{background:var(--status-yellow)}
.dot-red{background:var(--status-red)}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-base);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}

/* ── Utilities ── */
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.gap-xs{gap:4px}.gap-sm{gap:8px}.gap-md{gap:12px}.gap-lg{gap:16px}.gap-xl{gap:20px}.gap-2xl{gap:24px}
.text-center{text-align:center}
.text-right{text-align:right}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ── Page Transitions ── */
.page{display:none}
.page.active{display:block;animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slideRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}

/* ── Toast ── */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:var(--text-primary);
  color:var(--text-inverse);
  padding:10px 24px;
  border-radius:var(--radius-full);
  font-size:var(--text-sm);
  z-index:9999;
  animation:fadeIn 0.3s ease;
  pointer-events:none;
}