/* giappunito/frontend/static/css/giappunito.css — Editorial Washi & Sumi UI (Rule 16) */
/* Reason: Replace dark generic styling with self-hosted Washi paper + Vermilion design system. */
:root {
  color-scheme: light;
  --gp-washi: #F6F3EB;
  --gp-ivory: #FFFEFA;
  --gp-stone: #EAE5D9;
  --gp-border: #DFD9CC;
  --gp-border-strong: #CCC4B4;
  --gp-ink: #181815;
  --gp-muted: #5C5850;
  --gp-subtle: #8A8478;
  --gp-vermilion: #C1392B;
  --gp-vermilion-dark: #A42E22;
  --gp-indigo: #1E436E;
  --gp-matcha: #5A8565;
  --gp-matcha-deep: #2D6A4F;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--gp-washi);
  color: var(--gp-ink);
  font-family: "Inter", "Liberation Sans", -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gp-serif {
  font-family: "Georgia", "Noto Serif", "Liberation Serif", serif;
}

.gp-jp {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
}

.gp-header {
  background: rgba(250, 247, 240, 0.94);
  border-bottom: 1px solid var(--gp-border);
  backdrop-filter: blur(8px);
}

.gp-hanko {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: var(--gp-vermilion);
  color: #FFFEFA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px rgba(255, 254, 250, 0.3);
  flex-shrink: 0;
}

.gp-pill-stone {
  background: var(--gp-stone);
  color: #3D3A34;
  border: 1px solid var(--gp-border);
}

.gp-seg-wrap {
  background: var(--gp-stone);
  border: 1px solid var(--gp-border);
  border-radius: 9999px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.gp-seg-btn {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gp-muted);
  transition: background-color 150ms ease, color 150ms ease;
}

.gp-seg-btn.is-active,
.gp-seg-btn:hover {
  background: var(--gp-ivory);
  color: var(--gp-ink);
  box-shadow: 0 1px 2px rgba(24, 24, 21, 0.08);
}

.gp-hero-title {
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--gp-ink);
}

.gp-card {
  background: var(--gp-ivory);
  border: 1px solid var(--gp-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(24, 24, 21, 0.04);
}

.gp-auth-card {
  border-top: 4px solid var(--gp-vermilion);
}

.gp-input {
  width: 100%;
  min-height: 44px;
  border-radius: 7px;
  background: var(--gp-ivory);
  border: 1px solid var(--gp-border-strong);
  color: var(--gp-ink);
  padding: 0 12px;
  font-size: 0.9rem;
}

.gp-input:focus {
  outline: none;
  border-color: var(--gp-vermilion);
  box-shadow: 0 0 0 3px rgba(193, 57, 43, 0.14);
}

.gp-btn-primary {
  min-height: 44px;
  border-radius: 7px;
  background: var(--gp-vermilion);
  color: #FFFEFA;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background-color 150ms ease;
}

.gp-btn-primary:hover { background: var(--gp-vermilion-dark); }

.gp-btn-secondary {
  min-height: 44px;
  border-radius: 7px;
  background: var(--gp-stone);
  border: 1px solid var(--gp-border-strong);
  color: var(--gp-ink);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 150ms ease;
}

.gp-btn-secondary:hover { background: #DFD9CC; }

.gp-btn-ghost {
  min-height: 44px;
  min-width: 44px;
  border-radius: 8px;
  background: var(--gp-ivory);
  border: 1px solid var(--gp-border);
  color: var(--gp-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gp-btn-ghost:hover { color: var(--gp-ink); border-color: var(--gp-border-strong); }

.gp-ruby ruby { ruby-position: over; }
.gp-ruby rt {
  font-size: 0.38em;
  color: var(--gp-muted);
  font-family: "Inter", sans-serif;
  letter-spacing: 0.04em;
}
body.gp-hide-furi .gp-ruby rt { visibility: hidden; }

.gp-token-known { background: var(--gp-matcha); color: #FFFEFA; }
.gp-token-learning { background: var(--gp-indigo); color: #FFFEFA; }
.gp-token-missing { background: var(--gp-vermilion); color: #FFFEFA; }

.gp-progress-track {
  height: 6px;
  border-radius: 9999px;
  background: #E8E3D8;
  overflow: hidden;
}

.gp-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--gp-matcha-deep), var(--gp-indigo));
  transition: width 240ms ease;
}

.gp-chip-known {
  background: rgba(45, 106, 79, 0.12);
  color: var(--gp-matcha-deep);
  border: 1px solid rgba(45, 106, 79, 0.35);
}

.gp-chip-missing {
  background: rgba(193, 57, 43, 0.12);
  color: var(--gp-vermilion);
  border: 1px solid rgba(193, 57, 43, 0.35);
}

.gp-chip-learning {
  background: rgba(30, 67, 110, 0.12);
  color: var(--gp-indigo);
  border: 1px solid rgba(30, 67, 110, 0.35);
}