/* =============================================================
   赤嶺材木店 Design System ─ colors_and_type.css
   The full set of design tokens + semantic styles.
   Load via:
     <link rel="stylesheet" href="colors_and_type.css">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
   ============================================================= */

:root {
  /* ── Color: paper / base ───────────────────────────── */
  --paper:        #F6F1E8;   /* 紙白み・生成り。ページ背景。 */
  --paper-light:  #FBF8F1;   /* カードや上層の少し明るい紙 */
  --paper-deep:   #EFE7D6;   /* セクション切替用の少し沈んだ紙 */

  /* ── Color: wood ───────────────────────────────────── */
  --hinoki:       #C9A875;   /* 桧 ─ 温かい木の色。アクセント */
  --hinoki-soft:  #DCC097;
  --sugi:         #8B5A2B;   /* 杉 ─ ミディアムブラウン。リンク・強調 */
  --sugi-soft:    #A47148;
  --yakisugi:     #4A2C1A;   /* 焼き杉 ─ 濃い茶。年輪の影色 */
  --yakisugi-soft:#5E3B26;

  /* ── Color: sumi (ink / text) ──────────────────────── */
  --sumi:         #1F1A14;   /* 墨 ─ 純黒ではない深い炭 */
  --sumi-soft:    #3D352B;
  --sumi-mute:    #7A6F5F;
  --line:         #C7BBA3;   /* 罫線 */
  --line-soft:    #E2D8C1;

  /* ── Semantic colors ───────────────────────────────── */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-deep);
  --surface:      var(--paper-light);
  --fg1:          var(--sumi);
  --fg2:          var(--sumi-soft);
  --fg3:          var(--sumi-mute);
  --accent:       var(--sugi);
  --accent-deep:  var(--yakisugi);
  --link:         var(--sugi);
  --link-hover:   var(--yakisugi);
  --border:       var(--line);
  --border-soft:  var(--line-soft);

  /* ── Type: families ────────────────────────────────── */
  --font-serif-jp: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "游明朝", serif;
  --font-serif-en: "EB Garamond", "Cormorant Garamond", "Times New Roman", serif;
  --font-mono:     ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ── Type: scale ───────────────────────────────────── */
  --fs-display:  clamp(40px, 6vw, 76px);
  --fs-h1:       clamp(32px, 4vw, 48px);
  --fs-h2:       clamp(24px, 2.6vw, 32px);
  --fs-h3:       clamp(19px, 1.6vw, 22px);
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-micro:    12px;

  --lh-display: 1.3;
  --lh-heading: 1.45;
  --lh-body:    2.0;
  --lh-tight:   1.5;

  --tracking-display: 0.06em;
  --tracking-heading: 0.08em;
  --tracking-body:    0.02em;
  --tracking-label:   0.18em;

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

  --section-py:   clamp(80px, 12vw, 160px);
  --container-max: 1240px;
  --measure: 38em;

  /* ── Radii (mostly square) ─────────────────────────── */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ── Shadow (almost none) ──────────────────────────── */
  --shadow-paper: 0 1px 0 rgba(31, 26, 20, 0.04);
  --shadow-card:  0 1px 0 rgba(31, 26, 20, 0.06), 0 12px 24px -20px rgba(31, 26, 20, 0.18);

  /* ── Motion ────────────────────────────────────────── */
  --ease-quiet: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:   180ms;
  --dur-med:    420ms;
  --dur-slow:   900ms;
}

/* =============================================================
   Base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--hinoki); color: var(--sumi); }

img { max-width: 100%; display: block; }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-quiet),
              border-color var(--dur-fast) var(--ease-quiet);
}
a:hover { color: var(--link-hover); border-bottom-color: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}

/* =============================================================
   Type styles (semantic)
   ============================================================= */

.display, h1.display {
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-serif-jp);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--fg1);
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-family: var(--font-serif-jp);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--fg1);
  margin: 0 0 var(--s-4);
}

h3, .h3 {
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: 0.05em;
  color: var(--fg1);
  margin: 0 0 var(--s-3);
}

p, .body {
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg2);
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
}

.small, small {
  font-size: var(--fs-small);
  color: var(--fg3);
  line-height: 1.8;
}

.micro {
  font-size: var(--fs-micro);
  color: var(--fg3);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* English labels - small caps serif */
.eyebrow, .label-en {
  font-family: var(--font-serif-en);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg3);
  font-style: normal;
}

.numeral {
  font-family: var(--font-serif-en);
  font-weight: 400;
  font-style: italic;
  color: var(--accent-deep);
}

/* Vertical writing (for occasional accents) */
.tategaki {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.2em;
}

/* =============================================================
   Layout helpers
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

.section--paper-deep { background: var(--paper-deep); }
.section--sumi { background: var(--sumi); color: var(--paper); }
.section--sumi h1, .section--sumi h2, .section--sumi h3 { color: var(--paper); }
.section--sumi p { color: var(--line-soft); }

/* =============================================================
   Buttons
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 18px 32px;
  font-family: var(--font-serif-jp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  border-radius: var(--r-0);
  border: 1px solid currentColor;
  background: transparent;
  color: var(--sumi);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-quiet),
              color var(--dur-fast) var(--ease-quiet);
  text-decoration: none;
  line-height: 1;
}
.btn:hover { background: var(--sumi); color: var(--paper); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--yakisugi);
  border-color: var(--yakisugi);
  color: var(--paper);
}
.btn--primary:hover { background: var(--sumi); border-color: var(--sumi); }

.btn--ghost {
  border-color: var(--border);
  color: var(--sumi-soft);
}
.btn--ghost:hover { background: var(--paper-deep); color: var(--sumi); }

.btn .arrow {
  width: 18px; height: 1px;
  background: currentColor;
  position: relative;
  display: inline-block;
}
.btn .arrow::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

/* =============================================================
   Form fields
   ============================================================= */
.field { display: block; margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--fg2);
  margin-bottom: var(--s-2);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-serif-jp);
  font-size: 16px;
  color: var(--fg1);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  border-radius: 0;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-quiet);
}
.field input:focus,
.field textarea:focus { border-bottom-color: var(--sugi); }
.field textarea { resize: vertical; min-height: 120px; }

/* =============================================================
   Cards
   ============================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-0);
  padding: var(--s-5);
  transition: border-color var(--dur-med) var(--ease-quiet);
}
.card:hover { border-color: var(--sugi); }

/* =============================================================
   Ring divider (a horizontal line that looks like a slice of wood)
   ============================================================= */
.rule {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--line) 20%,
    var(--sugi-soft) 50%,
    var(--line) 80%,
    transparent 100%);
  margin: var(--s-6) 0;
}

/* =============================================================
   Utility
   ============================================================= */
.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-5); }
.stack-xl > * + * { margin-top: var(--s-7); }

.center { text-align: center; }
.measure { max-width: var(--measure); }

.muted { color: var(--fg3); }
.accent-text { color: var(--accent); }