/* ===== ALICE JAPAN — Design Tokens (extracted from reference) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Serif:wght@500;600;700&display=swap');

:root {
  --background: 228 14% 7%;
  --foreground: 43 32% 94%;
  --card: 228 10% 11%;
  --card-foreground: 43 32% 94%;
  --popover: 228 10% 11%;
  --popover-foreground: 43 32% 94%;
  --primary: 37 49% 69%;        /* gold #D7B989 */
  --primary-foreground: 228 14% 7%;
  --secondary: 351 31% 69%;     /* dusty rose */
  --secondary-foreground: 228 14% 7%;
  --muted: 228 10% 15%;
  --muted-foreground: 0 0% 72%;
  --accent: 37 49% 69%;
  --accent-foreground: 228 14% 7%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 43 32% 94%;
  --border: 228 10% 18%;
  --input: 228 10% 15%;
  --ring: 37 49% 69%;
  --radius: 0.5rem;
}

/* ===== Theme: Elegant Sakura (light / rose) — toggled via bottom-left user button ===== */
[data-theme="sakura"] {
  --background: 340 18% 96%;
  --foreground: 340 25% 12%;
  --card: 340 15% 100%;
  --card-foreground: 340 25% 12%;
  --popover: 340 15% 100%;
  --popover-foreground: 340 25% 12%;
  --primary: 340 60% 55%;        /* rose/magenta */
  --primary-foreground: 0 0% 100%;
  --secondary: 340 30% 75%;
  --secondary-foreground: 340 25% 12%;
  --muted: 340 15% 92%;
  --muted-foreground: 340 15% 45%;
  --accent: 340 60% 55%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --border: 340 20% 85%;
  --input: 340 15% 92%;
  --ring: 340 60% 55%;
}

* { border-color: hsl(var(--border)); }

html, body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* serif gold logo */
.font-serif { font-family: 'Noto Serif', serif; }
.text-gradient-gold {
  background: linear-gradient(135deg, #D6B98A 0%, #E8D5B5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* gold->amber story ring */
.ring-story { background: linear-gradient(to bottom right, #D7B989 0%, #E6B84A 100%); }

/* themed scrollbars (adapt to light/dark via tokens) */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--muted-foreground) / .35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / .35); border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .55); }

/* hide scrollbars on horizontal scrollers (overrides the themed bar above) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* iOS safe-area bottom padding for the mobile tab bar */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* nav item helpers */
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem; border-radius: .75rem;
  font-size: 15px; font-weight: 500; transition: all .15s;
  color: hsl(var(--foreground));
}
.nav-item:hover { background: hsl(var(--muted) / .6); }
.nav-item.active { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }

.btn-gold {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-weight: 700; border-radius: .75rem; transition: opacity .15s;
}
.btn-gold:hover { opacity: .9; }

/* sync-type pills */
.pill { display:inline-flex; align-items:center; gap:.25rem; padding:.125rem .5rem; border-radius:9999px; font-size:11px; font-weight:600; }
.pill-vib { background:#7c3aed22; color:#a78bfa; }
.pill-temp { background:#f9731622; color:#fb923c; }
.pill-haptic { background:#06b6d422; color:#22d3ee; }