:root {
  /* Verdict colors */
  --color-allowed: #28a745;
  --color-conditional: #ffc107;
  --color-blocked: #dc3545;
  --color-unknown: #6c757d;

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-card: #ffffff;

  /* Text */
  --text-primary: #1a1a1a;
  --text-secondary: #6c757d;
  --text-citation: #0d6efd;

  /* Typography */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-jp: 'Noto Sans JP', sans-serif;

  /* Brand palette */
  --brand-navy:   #0b2545;
  --brand-navy-2: #13315c;
  --brand-accent: #c8553d;  /* vermillion (朱色) — used sparingly */
  --brand-gold:   #c9a959;  /* reserved for passport seals */
  --brand-mist:   #eef2f6;  /* footer bg, rule lines */
  --brand-line:   #d8dee4;  /* dividers */
}

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

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.card {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Skeleton shimmer for processing steps */
.step--pending .step__result {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  height: 1em;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Verdict badge entrance animation */
.verdict-badge--animate .verdict-badge__pill {
  animation: badge-spring 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes badge-spring {
  0%   { transform: scale(0.8); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Japanese text */
.lang-ja, [lang="ja"] {
  font-family: var(--font-jp);
}

/* Monospace for regulation references */
.citation, .reasoning, code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* Demo watermark */
.demo-watermark {
  position: fixed;
  bottom: 8px;
  right: 12px;
  color: #adb5bd;
  font-size: 11px;
  pointer-events: none;
}