/* ============================================================
   ZEROS Design System — Colors & Type
   ----------------------------------------------------------------
   Brand: ZEROS / Business Management Support
   Audience: 中小医療機関・中小企業 (Japan)
   Voice: 構造的・やさしい・伴走的 (structural, gentle, accompanying)
   ============================================================ */

/* ---------- 1. Colors ---------- */
:root {
  /* Primary — deep forest teal pulled from the live site theme color
     (#1C3A38). This is the brand's anchor. */
  --zeros-forest-900: #0E2422;
  --zeros-forest-800: #14302E;
  --zeros-forest-700: #1C3A38;  /* PRIMARY */
  --zeros-forest-600: #2A4F4C;
  --zeros-forest-500: #3D6764;
  --zeros-forest-400: #6B8B88;
  --zeros-forest-300: #A8BFBC;
  --zeros-forest-200: #D4DEDC;
  --zeros-forest-100: #E8EEED;
  --zeros-forest-050: #F2F5F4;

  /* Accent — warm clay. Picks up the wellness/coaching warmth. */
  --zeros-clay-900: #5C2E1E;
  --zeros-clay-700: #B5604A;
  --zeros-clay-600: #C97B5C;  /* ACCENT */
  --zeros-clay-500: #D9967A;
  --zeros-clay-300: #E8C0AA;
  --zeros-clay-100: #F4E0D2;
  --zeros-clay-050: #FBF3EC;

  /* Rose — alt surface tone pulled from brand-card-mauve.jpg.
     Use as the secondary section background instead of sand-100 when a
     softer, more romantic feel is wanted. Pairs well with forest-700. */
  --zeros-rose-900: #4A2E32;
  --zeros-rose-700: #7C5860;
  --zeros-rose-500: #A68088;
  --zeros-rose-400: #BFA0A6;  /* surface */
  --zeros-rose-300: #D6BEC2;
  --zeros-rose-200: #E5D2D5;
  --zeros-rose-100: #F0E1E3;
  --zeros-rose-050: #F8EEEF;

  /* Neutral — warm sand canvas. */
  --zeros-sand-050: #FAF7F1;  /* page bg */
  --zeros-sand-100: #F4F0E7;
  --zeros-sand-200: #E8DFCE;
  --zeros-sand-300: #D4C8B0;
  --zeros-sand-500: #9C8E76;
  --zeros-sand-700: #6B5F4D;
  --zeros-sand-900: #2A241B;

  /* Ink — text neutrals (slightly warm black, not pure). */
  --zeros-ink-900: #1A1714;
  --zeros-ink-700: #3A332C;
  --zeros-ink-500: #6B6259;
  --zeros-ink-300: #A89F94;
  --zeros-ink-100: #DDD5C8;

  /* Pure */
  --zeros-white: #FFFFFF;
  --zeros-paper: #FBFAF6;

  /* Semantic — status */
  --zeros-success: #4A8B6B;
  --zeros-warning: #D4A24C;
  --zeros-danger:  #B8503D;
  --zeros-info:    #4F7B95;

  /* Semantic — surfaces & text */
  --bg:           var(--zeros-sand-050);
  --bg-paper:     var(--zeros-paper);
  --bg-elevated: var(--zeros-white);
  --bg-inverse:   var(--zeros-forest-700);
  --bg-muted:     var(--zeros-sand-100);

  --fg:           var(--zeros-ink-900);
  --fg-1:         var(--zeros-ink-900); /* primary text */
  --fg-2:         var(--zeros-ink-700); /* body */
  --fg-3:         var(--zeros-ink-500); /* muted */
  --fg-4:         var(--zeros-ink-300); /* placeholder */
  --fg-on-dark:   var(--zeros-sand-050);
  --fg-on-accent: var(--zeros-white);

  --border:       var(--zeros-sand-200);
  --border-strong:var(--zeros-sand-300);
  --border-ink:   var(--zeros-forest-700);

  --accent:       var(--zeros-clay-600);
  --accent-hover: var(--zeros-clay-700);
  --primary:      var(--zeros-forest-700);
  --primary-hover:var(--zeros-forest-800);
}

/* ---------- 2. Type — fonts ---------- */
/* Display: Shippori Mincho B1 — refined Japanese serif, editorial weight.
   Body JP: Noto Sans JP — clean, neutral.
   Latin display: Cormorant Garamond — italics for emphasis (matches site).
   Latin body: Inter — modern grotesk, paired with Noto Sans JP.
   Mono / labels: JetBrains Mono — for section labels (PROBLEM, ISSUE MAP). */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-display: 'Shippori Mincho B1', 'Noto Serif JP', 'Cormorant Garamond', serif;
  --font-display-latin: 'Cormorant Garamond', 'Shippori Mincho B1', serif;
  --font-body: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-body-latin: 'Inter', 'Noto Sans JP', sans-serif;
  --font-label: 'JetBrains Mono', 'Inter', ui-monospace, monospace;
  --font-numeric: 'Cormorant Garamond', 'Shippori Mincho B1', serif;
}

/* ---------- 3. Type — scale ---------- */
:root {
  --fs-display-1: clamp(48px, 6.4vw, 88px);
  --fs-display-2: clamp(40px, 5.2vw, 68px);
  --fs-h1: clamp(32px, 3.8vw, 52px);
  --fs-h2: clamp(26px, 2.6vw, 36px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-label: 12px;
  --fs-overline: 11px;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.7;     /* JP body — generous */
  --lh-loose: 1.85;

  --tracking-overline: 0.18em;
  --tracking-label:    0.08em;
  --tracking-display: -0.01em;
}

/* ---------- 4. Spacing & radii ---------- */
:root {
  --sp-0: 0;
  --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-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.06);
  --shadow-md: 0 4px 14px rgba(26, 23, 20, 0.08), 0 1px 3px rgba(26, 23, 20, 0.04);
  --shadow-lg: 0 18px 40px -12px rgba(26, 23, 20, 0.18), 0 4px 12px rgba(26, 23, 20, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--border);

  --duration-fast: 150ms;
  --duration: 240ms;
  --duration-slow: 480ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 5. Semantic type ---------- */
.zeros-display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.zeros-display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.zeros-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.zeros-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
}
.zeros-h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.zeros-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.zeros-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.zeros-overline {
  font-family: var(--font-label);
  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-3);
}
.zeros-label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.zeros-numeric {
  font-family: var(--font-numeric);
  font-style: italic;
  font-weight: 500;
}
.zeros-emph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- 6. Base reset for previews ---------- */
.zeros-base {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}