/* ============================================================
   SHOMEJAPAN — Design Tokens (v2: light, simple, brand-aligned)

   Driven by the actual SHOMEJAPAN logo:
   - Warm off-white background (matches logo backdrop)
   - Near-black ink for text
   - Hinomaru red as the only accent color
   - Single typeface (Inter) — the brush logo handles the personality
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --paper:      #F4F1EC;
  --paper-2:    #ECE7DE;
  --paper-3:    #E0D9CC;
  --line:       #DDD7CC;
  --line-soft:  #E8E2D6;

  --ink:        #161614;
  --ink-2:      #4A4A47;
  --ink-3:      #8A8782;
  --ink-4:      #B5B0A6;

  --red:        #D8211C;
  --red-hi:     #E83933;
  --red-lo:     #B41812;
  --red-soft:   rgba(216, 33, 28, 0.08);

  --focus:      #D8211C;
  --error:      #C0392B;
  --success:    #4B8B5A;

  /* ---------- Typography ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-relaxed: 1.7;

  --tracking-tighter: -0.025em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.12em;

  /* ---------- Spacing ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Layout ---------- */
  --max:        1120px;
  --max-narrow:  720px;
  --max-prose:   620px;
  --gutter:    24px;
  --gutter-lg: 48px;

  /* ---------- Effects ---------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --shadow-card:  0 1px 2px rgba(0,0,0,0.04),
                  0 12px 32px -8px rgba(0,0,0,0.08);
  --shadow-hover: 0 1px 2px rgba(0,0,0,0.04),
                  0 20px 48px -8px rgba(0,0,0,0.14);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    180ms;
  --t-base:    280ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}