/* ============================================================
   Nutmeg US — Design Tokens (generator contract, v1.0 2026-07-06)
   Source of truth: design/design-us.md v1.2 (measured contrast).
   RULE FOR GENERATORS: use ONLY these custom properties and the
   component classes below. Do not invent hex values, fonts, radii,
   shadows, or new components. Off-system output is rejected.
   ============================================================ */

:root {
  /* ---- Color: elephant (primary dark) ---- */
  --elephant:           #143351;  /* hero/section bg, buttons, headings on light */
  --elephant-dark:      #102840;  /* cards on elephant, hover on dark */
  --elephant-lightest:  #EFF7F9;  /* ice-blue tint bg */

  /* ---- Color: apricot (accent — CTA/highlight ONLY) ---- */
  --apricot:            #EF8869;  /* accent CTA bg, icons, map-pin */
  --apricot-dark:       #BF6C54;  /* hover/pressed of apricot elements */
  --apricot-light:      #F3AB96;  /* decorative tints */
  --apricot-lighter:    #FBE7E1;  /* soft highlight section bg */
  --apricot-lightest:   #FDF3F0;  /* card fg on apricot-lighter, icon chips */

  /* ---- Color: warm neutrals (default backgrounds) ---- */
  --linen:              #FCF6ED;  /* default alternate section bg */
  --linen-light:        #FCF8F2;
  --warm-white:         #FFF7F1;  /* large-section wash */
  --linen-dark:         #C9C4BD;  /* borders on linen */

  /* ---- Color: mint relief ---- */
  --black-squeeze:      #E6F6F5;  /* occasional cool-relief section */
  --black-squeeze-dark: #B8C4C4;  /* borders/fg on mint */

  /* ---- Color: text & neutrals ---- */
  --text-1:             #0C0705;  /* body text on light (warm black — never #000) */
  --text-2:             #545150;  /* secondary text, captions */
  --muted:              #858382;  /* decorative/disabled ONLY — fails AA for body */
  --neutral-lighter:    #DAD9D9;  /* dividers */
  --neutral-lightest:   #F2F2F2;
  --white:              #FFFFFF;

  /* ---- Typography: Poppins ONLY (design-us.md §3.1) ---- */
  --font: 'Poppins', -apple-system, sans-serif;
  --h1-size: 56px; --h1-weight: 700; --h1-lh: 1.2; --h1-ls: 0;
  --h2-size: 48px; --h2-weight: 500; --h2-lh: 1.2; --h2-ls: -0.03rem;
  --h3-size: 40px; --h3-weight: 500; --h3-lh: 1.2; --h3-ls: -0.025rem;
  --h4-size: 32px; --h4-weight: 700; --h4-lh: 1.3; --h4-ls: 0;
  --h5-size: 24px; --h5-weight: 500; --h5-lh: 1.4; --h5-ls: -0.015rem;
  --h6-size: 20px; --h6-weight: 500; --h6-lh: 1.4; --h6-ls: -0.0125rem;
  --body-size: 16px; --body-lg-size: 18px; --small-size: 14px;
  --eyebrow-size: 14px; --eyebrow-weight: 600;

  /* ---- Spacing (8px base) ---- */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;
  --section-pad: var(--sp-7);            /* desktop section padding */
  --container-max: 1200px;

  /* ---- Radii ---- */
  --radius-card: 24px;                    /* cards 24–40px */
  --radius-card-lg: 40px;                 /* feature/hero cards */
  --radius-pill: 100px;                   /* ALL buttons are pills */
  --radius-chip: 12px;

  /* ---- Shadow (soft only — no hard/glow shadows) ---- */
  --shadow-card: 0 8px 32px rgba(20, 51, 81, 0.08);
  --shadow-card-hover: 0 12px 40px rgba(20, 51, 81, 0.12);

  /* ---- Motion (approved patterns only) ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms; --dur-reveal: 600ms;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); font-size: var(--body-size); font-weight: 400;
  line-height: 1.5; color: var(--text-1); background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-3); }

/* Headings — sentence case in copy; sizes drop on mobile */
h1, .h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
h2, .h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
h3, .h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
h4, .h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-lh); }
h5, .h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); line-height: var(--h5-lh); letter-spacing: var(--h5-ls); }
h6, .h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); line-height: var(--h6-lh); letter-spacing: var(--h6-ls); }
@media (max-width: 767px) {
  h1, .h1 { font-size: 40px; } h2, .h2 { font-size: 36px; }
  h3, .h3 { font-size: 32px; } h4, .h4 { font-size: 28px; }
  :root { --section-pad: var(--sp-6); }
}
.lead { font-size: var(--body-lg-size); }
.small, .caption { font-size: var(--small-size); color: var(--text-2); }
.eyebrow {
  font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--apricot-dark);
}
.on-dark .eyebrow { color: var(--apricot-light); }

/* ============================================================
   SECTION SCHEMES (design-us.md §2.3 — the ONLY allowed section recipes)
   Rhythm: hero(s1|s2) → trust bar → alternate s2/s3/s4 → s5 CTA band → s1 footer
   Background ratio target: warm lights ~55% / elephant ~25% / apricot ~15% / mint ~5%
   ============================================================ */
.section { padding: var(--section-pad) 0; }
.s1 { background: var(--elephant); color: var(--white); }        /* hero, proof/stats, footer */
.s1 .card { background: var(--elephant-dark); }
.s2 { background: var(--linen); color: var(--text-1); }          /* default content */
.s2 .card { background: var(--white); }
.s3 { background: var(--black-squeeze); color: var(--text-1); }  /* feature/stat relief */
.s4 { background: var(--apricot-lighter); color: var(--text-1); }/* highlight, testimonial */
.s4 .card { background: var(--apricot-lightest); }
.s5 { background: var(--apricot); color: var(--elephant); }      /* CTA band ONLY, one per page */
.s-white { background: var(--white); color: var(--text-1); }
.s-wash { background: var(--warm-white); color: var(--text-1); }

/* ============================================================
   BUTTONS — pills only (design-us.md §8.1)
   ============================================================ */
.btn {
  display: inline-block; border-radius: var(--radius-pill);
  padding: 10px 24px; font-family: var(--font); font-weight: 500;
  font-size: 16px; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn-primary { background: var(--elephant); color: var(--white); }
.btn-primary:hover { background: var(--elephant-dark); }
.btn-on-dark { background: var(--white); color: var(--elephant); }
.btn-on-dark:hover { background: var(--linen); }
.btn-accent { background: var(--apricot); color: var(--elephant); } /* NEVER white text on apricot buttons */
.btn-accent:hover { background: var(--apricot-dark); color: var(--white); }
.btn-outline { background: transparent; color: var(--elephant); border-color: var(--elephant); }
.btn-outline:hover { background: var(--elephant); color: var(--white); }
.on-dark .btn-outline, .s1 .btn-outline { color: var(--white); border-color: var(--white); }
.btn:focus-visible { outline: 3px solid var(--apricot); outline-offset: 2px; } /* never remove focus */

/* ============================================================
   SHARED COMPONENTS (locked inventory — see design-brief.md §4)
   ============================================================ */
.card {
  background: var(--white); border-radius: var(--radius-card);
  padding: var(--sp-4); box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.card-lg { border-radius: var(--radius-card-lg); padding: var(--sp-5); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
@media (max-width: 991px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } }
/* 2026-08-28 スマホ対策: 列の中身（見本など）が列幅を押し広げてページが横に伸びるのを防ぐ */
.hero-grid > *, .tour-row > *, .spine-row > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *,
.featured > *, .article-layout > *, .cta-grid > *, .reach-grid > *, .story-grid > *, .pt-grid > * { min-width: 0; }
main svg { max-width: 100%; }
@media (max-width: 767px) {
  .featured { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Icon chip (48–56px circle behind rounded 2px-stroke line icon) */
.icon-chip {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--apricot-lightest); color: var(--elephant);
  display: flex; align-items: center; justify-content: center;
}
.s3 .icon-chip, .s4 .icon-chip { background: var(--white); }

/* Logo band — monochrome, uniform weight, interleaved (≤50% Hawaii) */
.logo-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-5); }
.logo-band img, .logo-band .logo-item {
  height: 32px; filter: grayscale(1) brightness(0.4); opacity: 0.75;
  font-weight: 600; color: var(--elephant); /* .logo-item = text placeholder until real logo file */
}

/* Metric band */
.metric { text-align: center; }
.metric .metric-value { font-size: var(--h2-size); font-weight: 700; line-height: 1.1; }
.metric .metric-label { font-size: var(--small-size); color: var(--text-2); margin-top: var(--sp-1); }
.s1 .metric .metric-label { color: var(--black-squeeze); }
.metric .metric-class { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } /* "Customer result" | "Industry research" */

/* Chat bubbles (product-in-situ AI: conversation shown doing its job) */
.chat { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 420px; }
.chat .bubble { padding: 12px 16px; border-radius: 18px; font-size: var(--small-size); max-width: 85%; }
.chat .bubble.guest { background: var(--neutral-lightest); color: var(--text-1); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat .bubble.ai { background: var(--elephant); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }

/* Testimonial */
.testimonial blockquote { font-size: var(--h6-size); font-weight: 500; line-height: 1.5; }
.testimonial .attribution { margin-top: var(--sp-2); font-size: var(--small-size); color: var(--text-2); }

/* FAQ accordion (native <details> — keyboard accessible by default) */
.faq details { border-bottom: 1px solid var(--neutral-lighter); padding: var(--sp-2) 0; }
.faq summary { font-weight: 500; font-size: var(--body-lg-size); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--apricot-dark); font-weight: 700; flex: 0 0 auto; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: var(--sp-1); color: var(--text-2); }

/* Journey line (shared SVG component — see components.html for reference markup) */
.journey-node-label { font-size: var(--small-size); font-weight: 600; fill: var(--elephant); }
.journey-node-dim { opacity: 0.3; } /* industry pages dim non-relevant nodes */

/* ============================================================
   MOTION — approved IntersectionObserver patterns ONLY
   (fade-up reveal, count-up, chat typing). No parallax >8px,
   no autoplay carousels, no scroll-jacking.
   Respect prefers-reduced-motion: everything visible, no animation.
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}