/* ===================================================
   JAPAN 2026 — Base styles & CSS variables
   =================================================== */

@font-face {
  font-family: 'CoFo Sans';
  src: url('/fonts/CoFo-Sans-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors — warm editorial palette */
  --color-red: #B42229;
  --color-red-dark: #8A1A20;
  --color-red-light: #D12830;
  --color-red-pale: #F8EDEE;
  --color-bg: #F0EAE0;
  --color-surface: #FAF7F2;
  --color-surface-alt: #E8E1D6;
  --color-border: #D8D0C4;
  --color-text: #18130F;
  --color-text-muted: #897566;
  --color-text-light: #B5A898;
  --color-ink: #18130F;
  --color-green: #246B3A;
  --color-green-pale: #E5F5EC;
  --color-amber: #C26B10;
  --color-amber-pale: #FBF0E2;

  /* City accent colors — slightly desaturated, more refined */
  --city-tokyo: #1E6FA0;
  --city-nikko: #107860;
  --city-fuji: #6B3599;
  --city-kamikochi: #1C7A42;
  --city-takayama: #B34800;
  --city-kyoto: #B42229;
  --city-koyasan: #1A222E;
  --city-osaka: #C26020;

  /* Typography */
  --font-sans: 'CoFo Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 1.0rem;
  --font-size-sm: 1.2rem;
  --font-size-base: 1.5rem;
  --font-size-md: 1.7rem;
  --font-size-lg: 2.0rem;
  --font-size-xl: 2.6rem;
  --font-size-2xl: 4.0rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-xs: 0.4rem;
  --space-sm: 0.8rem;
  --space-md: 1.2rem;
  --space-lg: 1.6rem;
  --space-xl: 2.4rem;
  --space-2xl: 3.2rem;

  /* Radius — less pill-y, more refined */
  --radius-sm: 0.4rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.4rem;
  --radius-full: 99rem;

  /* Shadow — barely-there; elevation via background contrast instead */
  --shadow-sm: 0 0.1rem 0.4rem rgba(24,19,15,0.05);
  --shadow-md: 0 0.2rem 1.0rem rgba(24,19,15,0.07);
  --shadow-lg: 0 0.6rem 2.4rem rgba(24,19,15,0.10);

  /* Layout */
  --max-width: 43rem;
  --header-height: 5.6rem;
  --bottom-bar-height: 6.4rem;
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --color-bg: #141210;
  --color-surface: #1E1A17;
  --color-surface-alt: #2A2420;
  --color-border: #3A3330;
  --color-text: #E8E0D6;
  --color-text-muted: #9A8E82;
  --color-text-light: #6A5E54;
  --color-ink: #F0EAE0;
  --color-red-pale: #2A1415;
  --color-green-pale: #0E2118;
  --color-amber-pale: #231608;
  --shadow-sm: 0 0.1rem 0.4rem rgba(0,0,0,0.3);
  --shadow-md: 0 0.2rem 1.0rem rgba(0,0,0,0.4);
  --shadow-lg: 0 0.6rem 2.4rem rgba(0,0,0,0.5);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100dvh;
  max-width: var(--max-width);
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1, h2, h3, h4 {
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--color-ink);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }

p { margin-bottom: var(--space-sm); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-red);
  text-decoration: none;
}

/* ── Utility ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-muted  { color: var(--color-text-muted); }
.text-small  { font-size: var(--font-size-sm); }
.text-warning { color: var(--color-red); }
.text-success { color: var(--color-green); }
.text-center { text-align: center; }

/* ── Loading spinner ── */
.spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}

.spinner::after {
  content: '';
  width: 2.8rem;
  height: 2.8rem;
  border: 0.25rem solid var(--color-border);
  border-top-color: var(--color-red);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Empty state ── */
.emptystate {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  color: var(--color-text-muted);
}

.emptystate__icon {
  font-size: 3.6rem;
  margin-bottom: var(--space-md);
  display: block;
}