/* ===========================================================
   HARRO Concierge — Design Tokens
   HARRO Brand Identity (2025) に準拠 / HARRO LIFE と統一
   =========================================================== */

:root {
  /* HARRO Brand Colors */
  --color-brand: #9E3E24;
  --color-brand-dark: #7C2D1B;
  --color-brand-soft: #FAEDE9;

  --color-cream: #EAE6C3;
  --color-cream-soft: #F5F1DA;

  --color-navy: #09202E;
  --color-navy-soft: #1A3346;

  /* Surface */
  --color-paper: #FFFFFF;
  --color-paper-dark: #F5F1DA;
  --color-surface-muted: #FAF8F3;

  /* Ink (text) */
  --color-ink: #09202E;
  --color-ink-soft: #2A3F4E;
  --color-ink-muted: #6B7785;
  --color-ink-subtle: #9AA5B1;

  /* Borders */
  --color-line: rgba(9, 32, 46, 0.08);
  --color-line-strong: rgba(9, 32, 46, 0.16);

  /* Container */
  --container-grid: 1180px;
  --container-content: 720px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
    "Yu Gothic", sans-serif;
  background: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.7;
}

::selection {
  background: var(--color-brand);
  color: white;
}

.font-display {
  font-family: "Anton", "Noto Sans JP", -apple-system, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.font-jp {
  font-family: "Noto Sans JP", -apple-system, sans-serif;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Smooth fade-in for sections */
@media (prefers-reduced-motion: no-preference) {
  .section-fade {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  .section-fade.visible {
    opacity: 1;
    transform: translateY(0);
  }
}