/* Mamamia v3.0 Design Tokens — 跟 Brand Kit 重做 */
/* Palette: 深綠 #2F3E34 · 赤陶橙 #D18A72 · 米杏 #EADBC9 · 奶白 #F6F3EE · 鼠尾草綠 #A7B79F */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;600;700&family=Caveat:wght@500;600&display=swap');

:root {
  /* Brand colors — straight from kit */
  --forest-900: #1F2A23;
  --forest-800: #2F3E34;     /* Primary deep */
  --forest-700: #3E5044;
  --forest-600: #5A6F60;

  --terracotta-700: #B87056;
  --terracotta-600: #D18A72;  /* Brand accent */
  --terracotta-400: #E8B5A2;
  --terracotta-200: #F5DDD0;
  --terracotta-100: #FBEEE6;

  --sand-300: #D9C5AE;
  --sand-200: #EADBC9;        /* Soft surface */
  --sand-100: #F1E7D8;
  --milk:     #F6F3EE;        /* App background */
  --paper:    #FBF8F2;        /* Card surface */
  --paper-warm: #FDFAF4;

  --sage-500: #8FA286;
  --sage-400: #A7B79F;        /* Soft accent */
  --sage-200: #D2DCCB;
  --sage-100: #E5EBE0;

  /* Neutral ink */
  --ink-900: #1B221C;
  --ink-700: #3A463C;
  --ink-500: #6E7A6F;
  --ink-400: #8C9690;
  --ink-300: #B5BDB4;
  --line:    #E2DDD2;
  --line-soft: #ECE6DB;

  /* Semantic */
  --heart:   #C9685A;          /* used in M-logo heart */
  --trust:   #5A8265;
  --warning: #C97B3D;
  --danger:  #B6463E;
  --star:    #D9A85C;

  /* Type */
  --font-serif: 'Noto Serif TC', 'Cormorant Garamond', 'PingFang TC', serif;
  --font-sans:  'Noto Sans TC', 'PingFang TC', 'Helvetica Neue', system-ui, sans-serif;
  --font-script: 'Caveat', 'Noto Serif TC', cursive;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;

  /* Soft shadows — paper-like */
  --shadow-xs: 0 1px 2px rgba(31,42,35,0.04), 0 0 0 1px rgba(31,42,35,0.04);
  --shadow-sm: 0 2px 6px rgba(31,42,35,0.05), 0 0 0 1px rgba(31,42,35,0.04);
  --shadow-md: 0 8px 24px rgba(31,42,35,0.08), 0 0 0 1px rgba(31,42,35,0.04);
  --shadow-lg: 0 24px 60px rgba(31,42,35,0.12), 0 0 0 1px rgba(31,42,35,0.05);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--milk);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif { font-family: var(--font-serif); letter-spacing: -0.005em; }
.script { font-family: var(--font-script); }
.sans { font-family: var(--font-sans); }
.tabular { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-500);
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(209,138,114,0.5); }
  70%  { box-shadow: 0 0 0 22px rgba(209,138,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(209,138,114,0); }
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1deg); }
}
.drift { animation: drift 6s var(--ease-out) infinite; transform-origin: center; }
.pulse-ring { animation: pulseRing 1.8s var(--ease-out) infinite; }

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

/* Components */
.glass {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(251, 248, 242, 0.78);
  border: 0.5px solid rgba(31,42,35,0.06);
}

.btn-primary {
  background: var(--forest-800);
  color: var(--paper);
  border: none;
  border-radius: var(--r-md);
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 200ms var(--ease-spring), background 150ms;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--forest-700); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }

.btn-accent {
  background: var(--terracotta-600);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 14px 22px;
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  transition: all 200ms var(--ease-spring);
}
.btn-accent:hover { background: var(--terracotta-700); }

.btn-ghost {
  background: transparent;
  color: var(--forest-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 22px;
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
}
.btn-ghost:hover { background: var(--paper-warm); border-color: var(--forest-600); }

.card {
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
  border: 0.5px solid var(--line-soft);
}
.card-soft {
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 0.5px solid var(--line-soft);
}

.divider { height: 1px; background: var(--line-soft); }

.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; }

/* Mamamia M logo (inline use) */
.logo-m { color: var(--forest-800); }
.logo-m .heart { fill: var(--terracotta-600); }