/* ============================================================
   法研 / Houken Corporation — Design System
   colors_and_type.css  ·  Foundational tokens
   ============================================================
   Brand: 健康・医療・社会保障 content & service provider.
   Voice: trustworthy, gentle, "安心 (peace of mind)".
   Two brand marks: deep corporate BLUE + vital LEAF GREEN.
   ------------------------------------------------------------ */

/* ---- Webfonts -------------------------------------------------
   Primary UI/body = Noto Sans JP (modern gothic — nearest web
   match to the custom gothic in the wordmark).
   Editorial/display = Noto Serif JP (the 出版/publishing side).
   English overlines = Barlow Semi Condensed (the bilingual
   EN+JP section-header motif on sociohealth.co.jp).
   SUBSTITUTION NOTE: the logo's "法 研" glyphs use a bespoke
   light Mincho; no exact webfont exists — Noto Serif JP is the
   closest. Flagged in README. -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@400;600;700&family=Barlow+Semi+Condensed:ital,wght@0,500;0,600;0,700;1,600&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  /* 2026年リブランド: メインカラーをブルーからグリーンに変更（旧 --houken-blue: #0058A8） */
  --houken-primary: #2C6B4F;  /* primary — trust, medical, corporate */
  --houken-green:   #007E3E;  /* accent  — health, vitality, the leaf */

  /* ---------- PRIMARY SCALE（旧 BLUE SCALE） ---------- */
  --primary-50:  #EFF6F2;
  --primary-100: #DEEDE5;
  --primary-200: #B9D9C7;
  --primary-300: #8FC1A4;
  --primary-400: #5A9E78;
  --primary-500: #3D7F5C;
  --primary-600: #2C6B4F;     /* = --houken-primary */
  --primary-700: #235940;
  --primary-800: #1B4732;
  --primary-900: #123424;

  /* ---------- GREEN SCALE ---------- */
  --green-50:  #E9F9F0;
  --green-100: #D2F3E1;
  --green-200: #A6E7C2;
  --green-300: #6FD79E;
  --green-400: #3FC57D;
  --green-500: #007E3E;       /* = --houken-green */
  --green-600: #006B35;
  --green-700: #005A2D;
  --green-800: #004A25;

  /* ---------- NEUTRALS (cool, clinical-clean) ---------- */
  --ink:    #18222E;          /* near-black, slight navy */
  --fg-1:   #1F2A36;          /* primary text */
  --fg-2:   #4A5563;          /* secondary text */
  --fg-3:   #56626E;          /* muted / captions */
  --fg-on-brand: #FFFFFF;

  --border-strong: #CDD6DE;
  --border:        #E2E8ED;
  --border-soft:   #EDF1F4;

  --bg:        #FFFFFF;
  --bg-muted:  #F5F8FA;       /* page background tint */
  --bg-sunken: #EDF2F6;
  --bg-tint-blue:  #F2F7FC;
  --bg-tint-green: #EEF9F2;

  /* ---------- SEMANTIC ---------- */
  --info:    #0058A8;
  --info-bg: #E6F0F9;
  --success: #009A4C;
  --success-bg: #D2F3E1;
  --warning: #D98A00;
  --warning-bg: #FBF0D8;
  --danger:  #D0414B;
  --danger-bg: #FBE6E7;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:  'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-en:    'Barlow Semi Condensed', var(--font-sans);

  /* ---------- TYPE SCALE (px / line-height) ---------- */
  --t-display: 700 44px/1.3 var(--font-sans);
  --t-h1:      700 34px/1.4 var(--font-sans);
  --t-h2:      700 26px/1.5 var(--font-sans);
  --t-h3:      700 20px/1.6 var(--font-sans);
  --t-lead:    400 18px/1.9 var(--font-sans);
  --t-body:    400 16px/1.95 var(--font-sans);
  --t-small:   400 14px/1.8 var(--font-sans);
  --t-caption: 400 12px/1.7 var(--font-sans);
  --t-overline: 700 13px/1 var(--font-en);   /* EN section overline */
  --t-serif-display: 700 40px/1.5 var(--font-serif);

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, low-contrast, never harsh) ---------- */
  --shadow-sm: 0 1px 2px rgba(24,34,46,.06), 0 1px 3px rgba(24,34,46,.04);
  --shadow-md: 0 2px 8px rgba(24,34,46,.07), 0 8px 24px rgba(24,34,46,.06);
  --shadow-lg: 0 12px 40px rgba(24,34,46,.12);
  --shadow-brand: 0 10px 28px rgba(0,88,168,.20);

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);   /* gentle ease-out */
  --dur: .28s;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font: var(--t-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1); color: var(--fg-1); letter-spacing: .01em; }
h2 { font: var(--t-h2); color: var(--fg-1); letter-spacing: .01em; }
h3 { font: var(--t-h3); color: var(--fg-1); }
p  { font: var(--t-body); color: var(--fg-2); text-wrap: pretty; }
small { font: var(--t-small); color: var(--fg-3); }
a { color: var(--houken-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Utility type classes ---- */
.t-display { font: var(--t-display); }
.t-lead    { font: var(--t-lead); color: var(--fg-2); }
.t-serif   { font-family: var(--font-serif); }

/* The signature bilingual section header:
   EN overline (brand color, tracked) above a JP heading. */
.overline {
  font: var(--t-overline);
  color: var(--houken-primary);
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-block;
}
.overline--green { color: var(--houken-green); }