/* =============================================================
   Saiseikai Kawaguchi Design System — Colors & Type
   Derived from /recruit/ and /recruit/nurse/ public pages.
   ============================================================= */

/* ---- Fonts (all via Google Fonts CDN — keeps repo size small) ---- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ========== BRAND COLOR TOKENS ========== */

  /* Base ink / background (warm, never pure black / white) */
  --color-ink:            #3d2c26;  /* primary text — warm dark brown */
  --color-ink-2:          #6b554c;  /* secondary text */
  --color-ink-3:          #9a857b;  /* tertiary / caption */
  --color-cream:          #fdf6ef;  /* primary page background */
  --color-cream-2:        #f7ede1;  /* section alt bg (warmer) */
  --color-cream-3:        #f1e4d4;  /* cards / panels */
  --color-white:          #ffffff;
  --color-line:           #e8d9c9;  /* hairline separators */
  --color-line-strong:    #c9b29f;

  /* Nurse-site primary (soft coral / sakura pink) */
  --color-rose:           #f4a8a8;
  --color-rose-soft:      #fce9e5;  /* wash bg */
  --color-rose-deep:      #d97b7b;  /* hover / pressed */
  --color-rose-ink:       #a4554f;  /* text on rose bg */

  /* General-recruit primary (warm mustard / goldenrod) */
  --color-gold:           #e6b53d;
  --color-gold-soft:      #fbeec4;
  --color-gold-deep:      #c99425;

  /* Accent — calm teal (used sparingly on flourishes) */
  --color-teal:           #7ec4bf;
  --color-teal-soft:      #d8ecea;
  --color-teal-deep:      #4f9c96;

  /* Semantic */
  --color-success:        #7a9e6e;
  --color-info:           #6a9bc7;
  --color-warn:           #e5a24a;
  --color-error:          #c75a5a;
  --color-link:           #a4554f;

  /* Aliases (semantic slots) */
  --fg-1:                 var(--color-ink);
  --fg-2:                 var(--color-ink-2);
  --fg-3:                 var(--color-ink-3);
  --fg-on-rose:           var(--color-white);
  --fg-on-gold:           var(--color-ink);
  --bg-page:              var(--color-cream);
  --bg-section:           var(--color-cream-2);
  --bg-card:              var(--color-white);
  --bg-accent-rose:       var(--color-rose-soft);
  --bg-accent-gold:       var(--color-gold-soft);
  --border-soft:          var(--color-line);
  --brand-nurse:          var(--color-rose);
  --brand-recruit:        var(--color-gold);

  /* ========== TYPE TOKENS ========== */
  --font-sans-jp:         'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-serif-jp:        'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-display-en:      'Playfair Display', 'Times New Roman', serif;
  --font-label-en:        'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:            ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem) */
  --fs-hero:              clamp(2.4rem, 5vw, 4rem);     /* 38–64 */
  --fs-display:           clamp(1.9rem, 3.5vw, 2.6rem); /* 30–42 */
  --fs-h1:                clamp(1.5rem, 2.4vw, 2rem);
  --fs-h2:                clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-h3:                1.125rem;
  --fs-body:              1rem;
  --fs-sm:                0.875rem;
  --fs-xs:                0.75rem;
  --fs-label:             0.72rem;

  --lh-tight:             1.25;
  --lh-snug:              1.4;
  --lh-body:              1.8;   /* generous Japanese body */
  --lh-loose:             2;

  --tracking-label:       0.16em;
  --tracking-display:     0.04em;

  /* ========== SPACING / RADIUS / SHADOW ========== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(61, 44, 38, 0.04);
  --shadow-sm: 0 2px 8px rgba(61, 44, 38, 0.05);
  --shadow-md: 0 8px 24px rgba(61, 44, 38, 0.06);
  --shadow-lg: 0 16px 40px rgba(61, 44, 38, 0.08);

  --ease-out:  cubic-bezier(0.22, 0.8, 0.36, 1);
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  640ms;
}

/* =================================================
   SEMANTIC ELEMENT STYLES
   ================================================= */
.ds-root, .ds-scope {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero — italic mincho, the site's signature emphatic style */
.ds-hero-jp {
  font-family: var(--font-serif-jp);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--fg-1);
}

/* English hero lockup (SAISEIKAI KAWAGUCHI ...) */
.ds-hero-en {
  font-family: var(--font-display-en);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  color: var(--fg-1);
  text-transform: none;
}

/* Section label — small tracked English uppercase above Japanese headline */
.ds-label-en {
  font-family: var(--font-label-en);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-rose-ink);
  display: inline-block;
}

.ds-label-en.gold { color: var(--color-gold-deep); }
.ds-label-en.teal { color: var(--color-teal-deep); }
.ds-label-en.ink  { color: var(--fg-2); }

/* H1 — Japanese section headline */
.ds-h1 {
  font-family: var(--font-sans-jp);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  letter-spacing: 0.02em;
}

.ds-h1-mincho {
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-style: italic;
}

.ds-h2 {
  font-family: var(--font-sans-jp);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ds-h3 {
  font-family: var(--font-sans-jp);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ds-p {
  font-family: var(--font-sans-jp);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.ds-p-tight { line-height: var(--lh-snug); }

.ds-caption {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  font-family: var(--font-sans-jp);
}

.ds-date {
  font-family: var(--font-label-en);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  font-size: var(--fs-sm);
}

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

/* Button — pill, filled rose, white text */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans-jp);
  font-weight: 500;
  font-size: var(--fs-body);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  background: var(--color-rose);
  color: var(--color-white);
  border: 1px solid var(--color-rose);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.ds-btn:hover { background: var(--color-rose-deep); border-color: var(--color-rose-deep); transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0) scale(0.98); filter: brightness(0.95); }

.ds-btn.outline {
  background: transparent;
  color: var(--color-rose-ink);
  border-color: var(--color-rose);
}
.ds-btn.outline:hover { background: var(--color-rose-soft); }

.ds-btn.gold { background: var(--color-gold); border-color: var(--color-gold); color: var(--fg-1); }
.ds-btn.gold:hover { background: var(--color-gold-deep); border-color: var(--color-gold-deep); color: var(--color-white); }

.ds-btn.ghost { background: var(--color-white); color: var(--fg-1); border-color: var(--border-soft); }
.ds-btn.ghost:hover { background: var(--color-cream-2); }

/* Card */
.ds-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ds-card-warm { background: var(--color-cream-2); }

/* Section chrome */
.ds-section {
  padding-block: var(--space-9);
}
.ds-container {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}