/* ================================================
   css/base.css  — CSS変数・リセット・タイポグラフィ
   ================================================ */

:root {
  /* Brand */
  --ig: #E1306C;
  --tt: #EE1D52;
  --x:  #1D9BF0;

  /* Semantic */
  --green:  #10B981;
  --amber:  #F59E0B;
  --red:    #EF4444;
  --purple: #7C3AED;

  /* Neutral palette (light mode) */
  --bg-base:      #FFFFFF;
  --bg-surface:   #F8F7F5;
  --bg-hover:     #F0EEEb;
  --border-light: rgba(0,0,0,.08);
  --border-mid:   rgba(0,0,0,.14);
  --border-dark:  rgba(0,0,0,.22);
  --text-primary: #1A1A18;
  --text-secondary:#6B6B67;
  --text-tertiary: #A8A8A4;

  /* Layout */
  --sidebar-w: 220px;
  --header-h:  52px;
  --bnav-h:    60px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Transitions */
  --ease: .15s ease;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-base:      #1C1C1A;
    --bg-surface:   #242422;
    --bg-hover:     #2E2E2C;
    --border-light: rgba(255,255,255,.07);
    --border-mid:   rgba(255,255,255,.12);
    --border-dark:  rgba(255,255,255,.20);
    --text-primary: #E8E6E0;
    --text-secondary:#9A9892;
    --text-tertiary: #5A5A56;
  }
}

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

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic UI',
               'Meiryo', 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-surface);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; cursor: pointer; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }

/* Typography helpers */
.mono { font-family: 'SF Mono', 'Consolas', 'Courier New', monospace; }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-amber  { color: var(--amber); }
.text-purple { color: var(--purple); }
.text-ig { color: var(--ig); }
.text-tt { color: var(--tt); }
.text-x  { color: var(--x); }

.fw-500 { font-weight: 500; }
.fs-10  { font-size: 10px; }
.fs-11  { font-size: 11px; }
.fs-12  { font-size: 12px; }
.fs-13  { font-size: 13px; }
.fs-14  { font-size: 14px; }
.fs-16  { font-size: 16px; }
.fs-20  { font-size: 20px; }
.fs-24  { font-size: 24px; }

/* Spacing helpers */
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }

/* Status dots */
.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-green  { background: var(--green); }
.dot-amber  { background: var(--amber); }
.dot-red    { background: var(--red); }
.dot-gray   { background: var(--border-mid); }
.dot-pulse  { animation: dotpulse 2s infinite; }

@keyframes dotpulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* Loading dots */
.dots-anim span { display: inline-block; animation: da 1.2s infinite; }
.dots-anim span:nth-child(2) { animation-delay: .2s; }
.dots-anim span:nth-child(3) { animation-delay: .4s; }
@keyframes da {
  0%, 80%, 100% { transform: translateY(0); }
  40%            { transform: translateY(-4px); }
}