/* ============================================================
   PTCG Dashboard — Colors & Typography Foundations
   A zh-TW-first dashboard for JP Pokémon TCG box drops.
   Vibe: Linear / Notion dashboard precision + 日系 premium collector feel.
   ============================================================ */

/* ---------- Fonts (self-hosted variable fonts) ---------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VF.ttf') format('truetype-variations'),
       url('fonts/Inter-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('fonts/NotoSansJP-VF.ttf') format('truetype-variations'),
       url('fonts/NotoSansJP-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans TC';
  src: url('fonts/NotoSansTC-VF.ttf') format('truetype-variations'),
       url('fonts/NotoSansTC-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* JetBrains Mono — no VF provided, still via CDN (flagged in fonts/README.md) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================
     COLOR — PRIMITIVES
     Base neutrals are warm-tinted (≈ hsl 20 neutrals) not pure
     grey, so the red primary feels grounded, not alarmy.
     ========================================================= */

  /* Pokémon red — primary brand anchor */
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-400: #F87171;
  --red-500: #EF4444;   /* ★ brand primary */
  --red-600: #DC2626;
  --red-700: #B91C1C;

  /* Warm-neutral surface scale */
  --ink-0:   #FFFFFF;
  --ink-25:  #FAFAF9;   /* page background */
  --ink-50:  #F5F5F4;
  --ink-100: #E7E5E4;   /* default hairline */
  --ink-200: #D6D3D1;
  --ink-300: #A8A29E;
  --ink-500: #78716C;   /* secondary text */
  --ink-700: #44403C;   /* body text */
  --ink-900: #1C1917;   /* headlines */

  /* Channel / category pin colors (from stores-seed.json) */
  --ch-pokemon:   #EF4444;   /* ポケモンセンター */
  --ch-yodobashi: #F59E0B;   /* ヨドバシ / BIC / 橘系家電 */
  --ch-aeon:     #10B981;    /* イオン 綠 */
  --ch-yamada:   #3B82F6;    /* ヤマダ 藍 */
  --ch-toys:     #EC4899;    /* トイザらス ピンク */
  --ch-other:    #6B7280;    /* その他 灰 */

  /* Lottery type (timeline Gantt colors) */
  --type-lottery:  #3B82F6;  /* 抽選 blue */
  --type-preorder: #10B981;  /* 予約 green */
  --type-walkin:   #F59E0B;  /* 店頭 orange */

  /* Status */
  --ok:    #059669;
  --warn:  #D97706;
  --alert: #DC2626;
  --info:  #2563EB;

  /* =========================================================
     SEMANTIC TOKENS
     ========================================================= */
  --bg-page:     var(--ink-25);
  --bg-surface:  var(--ink-0);
  --bg-sunken:   var(--ink-50);
  --bg-raised:   var(--ink-0);

  --fg-1:        var(--ink-900);   /* headline */
  --fg-2:        var(--ink-700);   /* body */
  --fg-3:        var(--ink-500);   /* secondary / jp副字 */
  --fg-4:        var(--ink-300);   /* disabled / meta */

  --border-1:    var(--ink-100);   /* default hairline */
  --border-2:    var(--ink-200);   /* stronger */
  --border-focus: var(--red-500);

  --primary:     var(--red-500);
  --primary-hover: var(--red-600);
  --primary-press: var(--red-700);
  --primary-tint: var(--red-50);

  /* =========================================================
     RADIUS / SHADOW / SPACING
     ========================================================= */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Crisp, low-spread shadows. Linear-like.  */
  --shadow-1: 0 1px 0 rgba(28,25,23,0.04), 0 1px 2px rgba(28,25,23,0.04);
  --shadow-2: 0 1px 0 rgba(28,25,23,0.04), 0 2px 6px rgba(28,25,23,0.06);
  --shadow-3: 0 4px 12px rgba(28,25,23,0.08), 0 1px 3px rgba(28,25,23,0.04);
  --shadow-pop: 0 12px 32px rgba(28,25,23,0.12), 0 2px 6px rgba(28,25,23,0.06);
  --ring-focus: 0 0 0 3px rgba(239,68,68,0.18);

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* =========================================================
     TYPOGRAPHY — primitives
     zh-TW primary, JP secondary, western = Inter
     ========================================================= */
  --font-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-latin: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Unified body stack — TC first (primary user-facing text), JP second
     (preserved Japanese), Inter last for Latin + numerals.
     Inter gets a slight letter-spacing nudge at usage sites so its x-height
     sits harmoniously with Noto TC/JP. */
  --font-body: 'Noto Sans TC', 'Noto Sans JP', 'Inter', sans-serif;

  --ts-display:  700 32px/1.2   var(--font-body);   /* page hero */
  --ts-h1:       600 24px/1.3   var(--font-body);
  --ts-h2:       600 18px/1.4   var(--font-body);
  --ts-h3:       600 15px/1.4   var(--font-body);
  --ts-body:     400 14px/1.55  var(--font-body);
  --ts-body-strong: 500 14px/1.55 var(--font-body);
  --ts-small:    400 13px/1.5   var(--font-body);
  --ts-caption:  400 12px/1.4   var(--font-body);
  --ts-jp-sub:   400 12px/1.4   var(--font-jp);   /* 日文並列副字 */
  --ts-mono:     500 12px/1.5   var(--font-mono);
  --ts-num:      500 14px/1.2   var(--font-latin); /* tabular nums */

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 320ms;
}

/* =========================================================
   Element defaults
   ========================================================= */
html, body { background: var(--bg-page); color: var(--fg-2); font: var(--ts-body); }
h1 { font: var(--ts-h1); color: var(--fg-1); letter-spacing: -0.01em; }
h2 { font: var(--ts-h2); color: var(--fg-1); letter-spacing: -0.005em; }
h3 { font: var(--ts-h3); color: var(--fg-1); }
p  { font: var(--ts-body); color: var(--fg-2); }
small { font: var(--ts-small); color: var(--fg-3); }
code { font: var(--ts-mono); color: var(--fg-1); background: var(--bg-sunken);
       padding: 1px 6px; border-radius: var(--radius-xs); }

.num { font-variant-numeric: tabular-nums; font-family: var(--font-latin); }
.jp-sub { font: var(--ts-jp-sub); color: var(--fg-3); }

/* =========================================================
   Mobile responsive — breakpoint 768px matches useIsMobile()
   Goal: kill global horizontal scroll, enlarge tap targets,
   let component-level React code do further adjustments.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body { max-width: 100vw; overflow-x: hidden; }

@media (max-width: 768px) {
  /* jp-sub floors at 10.5 -> 11.5px for readability */
  .jp-sub { font-size: clamp(10.5px, 2.8vw, 12px); }

  /* generic section/main padding trims */
  main, section { padding-left: 16px !important; padding-right: 16px !important; }

  /* any element with data-mobile-tap-44 gets minimum 44px hit area */
  [data-mobile-tap-44] { min-height: 44px; min-width: 44px; }

  /* Leaflet controls — nudge out of the way of hamburger */
  .leaflet-control-zoom { margin-top: 56px !important; }

  /* Leaflet zoom buttons tap-friendly */
  .leaflet-bar a { width: 36px !important; height: 36px !important; line-height: 36px !important; font-size: 22px !important; }

  /* Keep CJK pop-up card titles from breaking awkwardly */
  .popup-card-title { word-break: keep-all; overflow-wrap: break-word; }

  /* Native checkboxes — larger tap target */
  input[type="checkbox"] { width: 18px !important; height: 18px !important; }
}