/* ============================================================
   tomarin — Colors & Type Foundations
   Cloud PMS for small Japanese inns & ryokan.
   White-dominant, warm, literary, precise.
   Reference: tomarin_v7_reference.html (canonical)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600&family=Noto+Serif+JP:wght@400;500&display=swap');

:root {
  /* ---- Brand accents (never as large bg blocks) ---- */
  --brand-green:  #6FAF2A;
  --brand-yellow: #F5D938;
  --brand-blue:   #9ED4E2;

  /* Accessibility-safe text variants on light surfaces */
  --green-text:    #3E6E12;
  --yellow-text:   #8A6900;
  --yellow-stroke: #C99C0B;
  --blue-text:     #1a5a6b;

  /* Pale tints for section panels & icon chips */
  --green-bg:  #F5FBEE;
  --yellow-bg: #FDFAEA;
  --blue-bg:   #F0F8FB;

  /* Hover on primary green CTA */
  --green-hover: #5c951e;

  /* ---- Neutrals ---------------------------------------------- */
  --black:         #000000;
  --white:         #FFFFFF;
  --bg-off-white:  #FAFAF7;

  --text-dim:    rgba(0, 0, 0, 0.6);
  --text-dimmer: rgba(0, 0, 0, 0.5);
  --text-quiet:  rgba(0, 0, 0, 0.45);

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-card:   rgba(0, 0, 0, 0.1);

  /* Semantic aliases (kept compact) */
  --fg-1: var(--black);
  --fg-2: var(--text-dim);
  --fg-3: var(--text-dimmer);
  --fg-muted: var(--text-quiet);
  --bg-1: var(--white);
  --bg-2: var(--bg-off-white);
  --border: var(--border-subtle);
  --border-strong: var(--border-card);

  --success: var(--brand-green);
  --warning: var(--brand-yellow);
  --info:    var(--brand-blue);

  /* ---- Typography ------------------------------------------- */
  --font-jp:       'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-jp-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-en:       'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:     'SF Mono', Menlo, Consolas, monospace; /* URL mock only */

  --font-body:    'Noto Sans JP', 'Inter Tight', -apple-system, sans-serif;
  --font-serif:   var(--font-jp-serif);
  --font-display: var(--font-body);

  /* Type scale — matches DESIGN.md §3 */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   16px;
  --text-2xl:  18px;
  --text-3xl:  22px;
  --text-4xl:  26px;
  --text-5xl:  28px;
  --text-6xl:  32px;
  --text-hero: 44px;

  /* Line heights */
  --leading-hero:    1.15;
  --leading-title:   1.3;
  --leading-card:    1.4;
  --leading-body-em: 1.7;
  --leading-body:    1.85;
  --leading-tight:   1.5;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-h:      -0.02em;
  --tracking-normal:  0;
  --tracking-label:   0.06em;
  --tracking-wide:    0.12em;
  --tracking-x-wide:  0.15em;

  /* Weights — never above 600 */
  --weight-body:   400;
  --weight-medium: 500;
  --weight-semi:   600;

  /* ---- Spacing (4px base) ----------------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 14px;
  --sp-5: 16px;
  --sp-6: 18px;
  --sp-7: 20px;
  --sp-8: 22px;
  --sp-9: 24px;
  --sp-10: 26px;
  --sp-11: 28px;
  --sp-12: 32px;
  --sp-16: 48px;
  --sp-20: 56px;
  --sp-24: 64px;
  --sp-28: 72px;
  --sp-32: 80px;

  /* ---- Radii ------------------------------------------------ */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  10px;
  --radius-2xl: 12px;
  --radius-pill: 999px;

  /* ---- Elevation — hairline borders, almost no shadow ------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);

  /* ---- Motion ----------------------------------------------- */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;

  /* ---- Layout ----------------------------------------------- */
  --container-narrow:  720px;
  --container-default: 980px;
  --container-wide:    1000px;
  --container-max:     1200px;
}

/* ============================================================
   Semantic element defaults
   ============================================================ */

html, body {
  background: var(--white);
  color: var(--black);
  font-synthesis: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-medium);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-tight);
  color: var(--black);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-h);
  color: var(--black);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-h);
  color: var(--black);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-card);
  color: var(--black);
  margin: 0;
}

/* Literary taglines — serif, short phrases only */
.serif-tagline {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: var(--leading-body-em);
  color: var(--black);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--black);
  margin: 0;
}
.lead { font-size: var(--text-lg); line-height: var(--leading-body); color: var(--text-dim); }
.small { font-size: var(--text-sm); color: var(--text-dim); }
.caption {
  font-size: var(--text-xs);
  color: var(--text-dimmer);
  line-height: var(--leading-tight);
}

/* Eyebrows — LATIN · 日本語 pattern with middle-dot */
.eyebrow {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-x-wide);
  text-transform: uppercase;
  color: var(--text-dimmer);
}
.eyebrow-jp {
  font-family: var(--font-jp);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--text-dimmer);
}

.num, code, .code {
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
code, .code {
  font-size: 0.92em;
  background: var(--bg-off-white);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-subtle);
  color: var(--black);
}

a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--border-card);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-base);
}
a:hover { text-decoration-color: var(--brand-green); }

hr, .hairline {
  border: none;
  border-top: 0.5px solid var(--border-subtle);
  margin: var(--sp-9) 0;
}