/* Theme base and tokens - Unified Responsive Scaling System */

:root {
  /* ===== COLOR PALETTE ===== */
  /* Black / near-black */
  --color-black:        #1a1a1a;
  --color-text:         #1a1a1a;

  /* Gray scale */
  --color-gray:         #666;
  --color-muted:        #666;
  --color-gray-light:   #999;

  /* Beige / brand gold */
  --color-beige:        #d3b58c;
  --color-beige-dark:   #8a6a3f;

  /* Functional */
  --color-primary:      #8a6a3f;  /* beige-dark — links, buttons, accents */
  --color-border:       #e6e6e6;
  --bg-surface:         #fff;

  /* ===== TYPOGRAPHY SCALE (Mobile First) ===== */
  /* Base font: 16px (mobile) → 17px (tablet) → 18px (desktop) */
  --fs-base: 1rem;     /* 16px base for mobile readability */
  --fs-small: 0.875rem;    /* 14px */
  --fs-xsmall: 0.75rem;    /* 12px */
  --fs-xs: 0.625rem;   /* 10px - ECラベルなど */
  
  /* Body scale (above base) */
  --fs-md: 1.125rem;   /* 18px - slightly larger body / small heading */
  --fs-lg: 1.25rem;    /* 20px - card titles / lead text */
  --fs-xl: 1.5rem;     /* 24px - sub-section headings */

  /* Heading scale (relative to base) */
  --fs-h1: 2.5rem;     /* 40px mobile → 50px desktop */
  --fs-h2: 2rem;       /* 32px mobile → 40px desktop */
  --fs-h3: 1.75rem;    /* 28px mobile → 35px desktop */
  --fs-h4: 1.375rem;   /* 22px */
  --fs-h5: 1.125rem;   /* 18px (= --fs-md) */
  --fs-h6: 1rem;       /* 16px (= --fs-base) */

  /* ===== SPACING SCALE (Consistent 8px grid) ===== */
  --sp-2: 0.125rem;    /* 2px */
  --sp-4: 0.25rem;     /* 4px */
  --sp-6: 0.375rem;    /* 6px */
  --sp-8: 0.5rem;      /* 8px */
  --sp-12: 0.75rem;    /* 12px */
  --sp-16: 1rem;       /* 16px */
  --sp-20: 1.25rem;    /* 20px */
  --sp-24: 1.5rem;     /* 24px */
  --sp-32: 2rem;       /* 32px */
  --sp-40: 2.5rem;     /* 40px */
  --sp-48: 3rem;       /* 48px */
  --sp-60: 3.75rem;    /* 60px */
  --sp-80: 5rem;       /* 80px */

  /* ===== FONT WEIGHT ===== */
  --fw-normal:  400;
  --fw-medium:  500;  /* emphasis — no bold */

  /* ===== BUTTON SIZES ===== */
  --btn-height-sm: 2.75rem;   /* 44px - minimum touch target */
  --btn-height-md: 3rem;      /* 48px */
  --btn-height-lg: 3.5rem;    /* 56px */
  --btn-padding-x-sm: 1rem;   /* 16px */
  --btn-padding-x-md: 1.5rem; /* 24px */
  --btn-padding-x-lg: 2rem;   /* 32px */
  --btn-font-size: 1rem;      /* 16px base */

  /* ===== CONTAINER & SECTION ===== */
  --container-max: 75rem;      /* 1200px */
  --container-padding-sm: 1rem;    /* 16px mobile */
  --container-padding-md: 1.25rem; /* 20px tablet */
  --container-padding-lg: 1.5rem;  /* 24px desktop */
  
  --section-padding-sm: 2.5rem;   /* 40px mobile */
  --section-padding-md: 3.75rem;  /* 60px tablet */
  --section-padding-lg: 5rem;     /* 80px desktop */

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
}

html { 
  box-sizing: border-box;
  font-size: 16px; /* Base for rem calculations - mobile */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Tablet: Slightly larger base */
@media (min-width: 768px) {
  html {
    font-size: 17px;
  }
}

/* Desktop: Optimal reading size */
@media (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

*, *:before, *:after { box-sizing: inherit; }

body {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.7; /* Improved readability */
  letter-spacing: .01em;
  /* Lightweight, system-first Japanese sans stack */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global links */
a { color: var(--color-primary); text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:hover { text-decoration: underline; }
a:focus { outline: none; text-decoration: underline; }
a:visited { color: unset; }

/* Headings hierarchy (Responsive & Unified) */
h1, .h1 { 
  font-size: var(--fs-h1); 
  line-height: 1.3; 
  font-weight: var(--fw-medium); 
  margin: 0 0 0.75em;
  letter-spacing: -0.02em; /* Tighter for large text */
}
h2, .h2 { 
  font-size: var(--fs-h2); 
  line-height: 1.35; 
  font-weight: var(--fw-medium); 
  margin: 0 0 0.75em;
  letter-spacing: -0.01em;
}
h3, .h3 { 
  font-size: var(--fs-h3); 
  line-height: 1.4; 
  font-weight: var(--fw-medium); 
  margin: 0 0 0.75em;
}
h4, .h4 { 
  font-size: var(--fs-h4); 
  line-height: 1.5; 
  font-weight: var(--fw-medium); 
  margin: 0 0 0.75em;
}
h5, .h5 { 
  font-size: var(--fs-h5); 
  line-height: 1.6; 
  font-weight: var(--fw-medium); 
  margin: 0 0 0.75em;
}
h6, .h6 { 
  font-size: var(--fs-h6); 
  line-height: 1.6; 
  font-weight: var(--fw-medium); 
  margin: 0 0 0.75em;
}

/* Responsive heading adjustments */
@media (min-width: 768px) {
  :root {
    --fs-h1: 2.75rem;  /* 46.75px */
    --fs-h2: 2.25rem;  /* 38.25px */
    --fs-h3: 1.875rem; /* ~32px */
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 3.125rem; /* 56.25px */
    --fs-h2: 2.5rem;   /* 45px */
    --fs-h3: 2rem;     /* 36px */
  }
}

/* Underline-styled section titles (既存クラス互換) */
.text-underline { position: relative; display: inline-block; padding-bottom: 6px; }
.text-underline .underline { display: block; height: 2px; background: var(--color-primary); width: 100%; margin-top: 6px; }
.section-title { font-size: var(--fs-h2); text-align: center; }
.stores-section .section-title,
.footer-modern .section-title { text-align: center; }

/* Utility sizes */
.text-small { font-size: var(--fs-small); }
.text-xsmall { font-size: var(--fs-xsmall); }

/* Base type rhythm */
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em 1.25em; }
li { margin: 0.25em 0; }
.site-section p:last-child { margin-bottom: 0; }

/* Global list look similar to offcanvas quick links */
.link-list { list-style: none; padding: 0; margin: var(--sp-16) 0; }
.link-list li { padding: var(--sp-12) var(--sp-4); border-bottom: 1px solid var(--color-border); }
.link-list a { display: flex; align-items: center; justify-content: space-between; color: var(--color-primary); }
.chev, .mark { color: var(--color-primary); font-weight: var(--fw-medium); }

/* Two-column guide grid (fallback if reused site-wide) */
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.guide-grid a { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px; border-bottom: 1px solid #f0f0f0; color: inherit; }

/* Images never overflow */
img { max-width: 100%; height: auto; }

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  font-size: var(--fs-base);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  padding: 10px;
}
/* Remove default blue focus ring globally (requested). */
input:focus, select:focus, textarea:focus, button:focus { outline: none; box-shadow: none; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }

/* Optional: keep keyboard accessibility with focus-visible (subtle) */
:focus-visible { outline: 2px solid rgba(11, 116, 255, 0); outline-offset: 2px; }

/* Card body default padding */
.card .card-body { padding: 12px; }

/* ===== BUTTONS (Responsive Scaling) ===== */
.btn { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: var(--btn-height-sm); /* 44px minimum */
  padding: var(--sp-12) var(--btn-padding-x-sm);
  border-radius: var(--radius-full);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-medium);
  text-decoration: none;
  line-height: 1.4;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-primary { 
  background: var(--color-primary); 
  color: #fff;
}
.btn.btn-primary { color: #fff; }
.btn:hover { opacity: 0.92; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Tablet: Slightly larger buttons */
@media (min-width: 768px) {
  .btn {
    min-height: var(--btn-height-md); /* 48px */
    padding: var(--sp-14, 0.875rem) var(--btn-padding-x-md);
    font-size: var(--fs-base); /* レスポンシブ: 17-18pxはhtml base scaleで自動調整 */
  }
}

/* Desktop: Comfortable button size */
@media (min-width: 1024px) {
  .btn {
    min-height: var(--btn-height-lg); /* 56px */
    padding: var(--sp-16) var(--btn-padding-x-lg);
    font-size: 1.125rem; /* 18px */
  }
}

/* Breadcrumbs */
.breadcrumbs { background:#fff; border-bottom:1px solid #eee; font-size: var(--fs-xsmall); }
.breadcrumbs .site-container { padding:8px 16px; }
.breadcrumbs-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.breadcrumbs-list .bc-item { color: var(--color-muted); }
.breadcrumbs-list a { color: var(--color-primary); text-decoration:none; }
.breadcrumbs-list .bc-item + .bc-item:before { content:'›'; color: var(--color-muted); margin: 0 4px; }
.breadcrumbs-list .bc-current span { color: var(--color-text); }

/* Skip link */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; z-index:9999; }

/* Legacy WP headings mapped to unified style */
.widget-title, .comments-title { font-size: var(--fs-h2); text-align: center; }
.page-title { font-size: var(--fs-h2); text-align: center; margin-bottom: 24px; }
@media (min-width: 768px) { .page-title { margin-bottom: 32px; } }
.entry-title { font-size: var(--fs-h2); text-align: center; margin-bottom: 16px; }

/* Tables that might overflow (like lucky table) */
table { width: 100%; }

/* Constrain drawers/menus on desktop to 400px when reused */
@media (min-width: 768px) {
  .drawer-like { width: min(90vw, 400px); max-width: 400px; }
}

/* ===== CONTAINER & SECTION (Responsive Scaling) ===== */
.site-container { 
  max-width: var(--container-max); /* 1200px */
  margin-left: auto; 
  margin-right: auto; 
  padding-left: var(--container-padding-sm);
  padding-right: var(--container-padding-sm);
}

@media (min-width: 768px) {
  .site-container {
    padding-left: var(--container-padding-md);
    padding-right: var(--container-padding-md);
  }
}

@media (min-width: 1024px) {
  .site-container {
    padding-left: var(--container-padding-lg);
    padding-right: var(--container-padding-lg);
  }
}

.site-section { 
  padding: var(--section-padding-sm) 0; /* 40px mobile */
}

@media (min-width: 768px) { 
  .site-section { 
    padding: var(--section-padding-md) 0; /* 60px tablet */
  } 
}

@media (min-width: 1024px) { 
  .site-section { 
    padding: var(--section-padding-lg) 0; /* 80px desktop */
  } 
}

/* Standard heading spacing for sections */
.site-section .section-title { 
  margin-bottom: var(--sp-24); 
}

@media (min-width: 768px) { 
  .site-section .section-title { 
    margin-bottom: var(--sp-32); 
  } 
}

/* Section title group */
.section-title-wrap { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: var(--sp-6); 
  margin-bottom: var(--sp-20); 
}
.section-eyebrow { 
  color: var(--color-beige); 
  font-weight: var(--fw-medium); 
  letter-spacing: .12em; 
  font-size: var(--fs-xsmall); 
}

/* Simple vertical stack utility */
.stack > * + * { margin-top: var(--sp-12); }

/* Common blocks spacing inside home sections */
.site-section .contentslider2 { margin: var(--sp-16) 0 var(--sp-24); }
.site-section .mainmenuarea { margin-top: var(--sp-24); }
.site-section .news-list { margin-bottom: var(--sp-16); }
.site-section .banner-area { margin-top: var(--sp-24); }
footer > .site-container { 
  padding-top: var(--sp-16); 
  padding-bottom: var(--sp-16); 
}

/* Compatibility mapping for legacy home-modern variables */
:root{
  --brand: var(--color-primary);
  --brand-2: #d3b58c; /* accent */
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --surface: var(--bg-surface);
  --bg: #faf8f6;
  --shadow: none;
  --radius: 0;

  /* ===== 2026 RENEWAL — Brand tokens (polish layer) ===== */
  /* Color */
  --brand-dark:        #2c2620;   /* hero body / matte dark */
  --brand-dark-2:      #3a3128;   /* slightly lifted */
  --brand-gold:        #8f6f3d;   /* accessible primary gold */
  --brand-gold-deep:   #8a6a3f;   /* deep gold = legacy color-primary */
  --brand-gold-soft:   #d3b58c;   /* legacy color-beige */
  --brand-cream:       #f7f1e8;   /* paper cream */
  --brand-cream-2:     #faf6ee;   /* lighter cream */
  --brand-ink:         #2d2a26;   /* body text */
  --brand-ink-soft:    #5b5046;   /* secondary text */
  --brand-line:        rgba(138,106,63,.18);

  /* Typography stacks */
  --ff-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif;
  --ff-sans:  system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  /* Letter / line tokens (polish) */
  --ls-tight:   -0.01em;
  --ls-normal:  0.02em;
  --ls-loose:   0.06em;
  --ls-eyebrow: 0.28em;
  --lh-tight:   1.25;
  --lh-base:    1.85;

  /* Section rhythm (polish) */
  --section-y:    clamp(64px, 10vw, 120px);
  --container-x:  clamp(20px, 5vw, 40px);

  /* Shadows (polish) */
  --shadow-sm: 0 1px 3px rgba(44,38,32,.06);
  --shadow-md: 0 6px 18px rgba(44,38,32,.10);
  --shadow-lg: 0 18px 48px -22px rgba(44,38,32,.28);
}