/* =========================================================================
   BRAND OFF Design System — Tokens
   Load once per page. All colors, type, spacing, radius, shadow live here.
   ========================================================================= */

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

:root {
  /* ---------- Color — Neutrals (warm gray ramp) ---------- */
  --paper:          #FFFFFF;
  --paper-warm:     #FAF8F5;
  --paper-warm-2:   #F4EFE7;
  --hairline:       #EFEAE0;
  --hairline-2:     #E8E3D9;
  --ink-50:         #F4EFE7;
  --ink-100:        #E8E3D9;
  --ink-200:        #CFC8BA;
  --ink-300:        #A9A193;
  --ink-400:        #807867;
  --ink-500:        #5F5849;
  --ink-600:        #3F3A30;
  --ink-700:        #2A2620;
  --ink-800:        #1F1C17;
  --ink-900:        #1A1A1A;
  --ink:            #1A1A1A;

  /* ---------- Color — Brand accent (gold / champagne) ---------- */
  --champagne:        #B8995A;
  --champagne-deep:   #8A6F3C;
  --champagne-light:  #D8C393;
  --champagne-tint:   #F3ECDD;

  /* ---------- Color — Semantic ---------- */
  --accent-red:     #C8102E;  /* SALE, NEW tags, urgent CTAs */
  --accent-red-deep:#9C0C24;
  --trust-green:    #0F7A3E;  /* 買取OK, AACD seal */
  --trust-green-light:#E6F2EB;

  /* ---------- Foreground / background aliases ---------- */
  --fg-1:           var(--ink-900); /* headings, body */
  --fg-2:           var(--ink-600); /* secondary text */
  --fg-3:           var(--ink-400); /* captions, meta */
  --fg-4:           var(--ink-300); /* placeholder, disabled */
  --fg-on-dark:     #FFFFFF;

  --bg-1:           var(--paper);
  --bg-2:           var(--paper-warm);
  --bg-3:           var(--paper-warm-2);
  --bg-inverse:     var(--ink-900);

  --brand-accent:   var(--champagne-deep);
  --brand-accent-contrast: #FFFFFF;

  /* ---------- Typography — Families ---------- */
  --ff-display:     'Cormorant Garamond', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; /* @kind font */
  --ff-sans:        'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif; /* @kind font */
  --ff-mono:        'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; /* @kind font */
  --ff-serif-jp:    'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; /* @kind font */

  /* ---------- Typography — Scale ---------- */
  --fs-hero:        clamp(40px, 5.4vw, 72px); /* @kind font */
  --fs-display:     clamp(32px, 3.8vw, 48px); /* @kind font */
  --fs-h1:          clamp(28px, 3vw, 36px); /* @kind font */
  --fs-h2:          clamp(22px, 2.2vw, 28px); /* @kind font */
  --fs-h3:          20px; /* @kind font */
  --fs-body-lg:     17px; /* @kind font */
  --fs-body:        15px; /* @kind font */
  --fs-body-sm:     13px; /* @kind font */
  --fs-caption:     12px; /* @kind font */
  --fs-micro:       11px; /* @kind font */

  --lh-tight:       1.15; /* @kind font */
  --lh-snug:        1.35; /* @kind font */
  --lh-body:        1.7; /* @kind font */
  --lh-loose:       1.85; /* @kind font */

  --tracking-display: 0.08em;  /* @kind font */
  --tracking-wide:    0.04em; /* @kind font */
  --tracking-normal:  0; /* @kind font */
  --tracking-tight:   -0.01em; /* @kind font */

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

  /* ---------- Radius ---------- */
  --r-0:    0; /* @kind radius */
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    8px;
  --r-pill: 9999px;

  /* ---------- Shadow ---------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(26,26,26,.04), 0 2px 8px rgba(26,26,26,.05);
  --elev-2: 0 2px 6px rgba(26,26,26,.06), 0 8px 24px rgba(26,26,26,.08);
  --elev-3: 0 12px 40px rgba(26,26,26,.14);

  /* ---------- Borders ---------- */
  --border-hair:   1px solid var(--hairline);
  --border-hair-2: 1px solid var(--hairline-2);
  --border-ink:    1px solid var(--ink-900);

  /* ---------- Layout ---------- */
  --container:     1240px;
  --container-nar: 960px;
  --nav-h:         72px;

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(.2,.7,.2,1); /* @kind other */
  --dur-fast:      150ms; /* @kind other */
  --dur:           250ms; /* @kind other */
  --dur-slow:      400ms; /* @kind other */
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
}

h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: var(--lh-snug); color: var(--fg-1); margin: 0; }

h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p  { margin: 0 0 var(--sp-4); }
small { font-size: var(--fs-caption); color: var(--fg-3); }

a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--brand-accent); }

hr { border: 0; border-top: var(--border-hair); margin: var(--sp-6) 0; }

/* The signature bilingual section header:
     <h2 class="bo-section-head"><span class="en">New Arrivals</span><span class="jp">新入荷商品</span></h2>
*/
.bo-section-head {
  display: flex; align-items: baseline; gap: var(--sp-4);
  font-weight: 400;
}
.bo-section-head .en {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.bo-section-head .jp {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}

/* Price (tabular) */
.bo-price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.bo-price .tax {
  font-weight: 400; font-size: var(--fs-caption); color: var(--fg-3); margin-left: 6px;
}

/* Tags */
.bo-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--r-1);
}
.bo-tag--new  { background: var(--ink-900); color: #fff; }
.bo-tag--sale { background: var(--accent-red); color: #fff; }
.bo-tag--ok   { background: var(--trust-green-light); color: var(--trust-green); }

/* Button primitives */
.bo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 28px;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.bo-btn:active { transform: scale(.98); }

.bo-btn--primary { background: var(--ink-900); color: #fff; }
.bo-btn--primary:hover { background: var(--champagne-deep); color: #fff; }

.bo-btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.bo-btn--ghost:hover { background: var(--paper-warm); }

.bo-btn--gold { background: var(--champagne-deep); color: #fff; }
.bo-btn--gold:hover { background: var(--ink-900); }

.bo-btn--red { background: var(--accent-red); color: #fff; }
.bo-btn--red:hover { background: var(--accent-red-deep); }

.bo-btn--pill { border-radius: var(--r-pill); height: 44px; padding: 0 22px; }

/* Inputs */
.bo-input {
  height: 44px;
  padding: 0 14px;
  background: var(--paper);
  border: var(--border-hair-2);
  border-radius: var(--r-1);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--fg-1);
  width: 100%;
  transition: border-color var(--dur) var(--ease-out);
}
.bo-input::placeholder { color: var(--fg-4); }
.bo-input:focus { outline: none; border-color: var(--ink-900); }

/* Dividers */
.bo-divider {
  height: 1px; background: var(--hairline); border: 0;
}

/* Container */
.bo-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

/* Utility */
.bo-text-display { font-family: var(--ff-display); letter-spacing: var(--tracking-display); }
.bo-text-mincho  { font-family: var(--ff-serif-jp); }
.bo-muted        { color: var(--fg-3); }