/* platform/base.css — 基本の色・余白・文字・全体レイアウト(最初に読む) (旧 core.css から分割・見た目の変更なし) */

/* OyinHub Core CSS - Dark Mode, Mobile-First */
/* Uzbek-inspired palette: deep indigo + gold + teal accent */

:root {
  --bg-base:      #0e0e18;
  --bg-card:      #181828;
  --bg-card2:     #1e1e32;
  --bg-nav:       #131320;
  --accent:       #c8a84b;   /* Samarkand gold */
  --accent2:      #2dd4bf;   /* teal */
  --accent3:      #8b5cf6;   /* purple */
  --danger:       #ef4444;
  --success:      #22c55e;
  --text-primary: #f0ece4;
  --text-secondary:#9b97a8;
  --text-muted:   #5c5872;
  --border:       #2a2a40;
  --border2:      #3a3a55;
  --shadow:       0 4px 24px rgba(0,0,0,0.5);
  --radius:       14px;
  --radius-sm:    8px;
  --font-main:    'Segoe UI', system-ui, -apple-system, sans-serif;
  --transition:   0.18s ease;
  --on-accent:    #000;
  --hero-a:       #1a1530;
  --hero-b:       #0e1a2e;
  --ref-a:        #1a1030;
  --ref-b:        #0e1530;
  --accent-soft:  rgba(200,168,75,0.08);
  --bg-float:     rgba(24,24,40,0.96);
  --bg-outer:     #070710;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-main);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ─── Typography ─── */
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 600; }
p  { line-height: 1.6; color: var(--text-secondary); }

/* ─── Layout ─── */
.container {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 16px;
}

.page {
  display: none;
  padding-bottom: 80px; /* nav height */
  min-height: 100vh;
  animation: fadeIn 0.2s ease;
}
.page.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }