/*
 * Design Tokens
 * 出典: design-system/tokens/{colors,typography,spacing,media,elevation,fonts}.css
 * 正本の変数名・値をそのまま移植したもの。値の変更・独自色の追加はしないこと。
 * （このファイルを唯一の一元管理場所とし、theme.json 側では値を重複定義しない）
 */

/* ---- colors.css ---- */
:root{
--navy-900:#071A31;--navy-800:#0B2545;--navy-700:#0F3159;--navy-600:#143C6B;--navy-400:#3D6493;--navy-200:#A9BCD3;--navy-050:#EDF1F7;
--blue-600:#24488A;--blue-500:#2B539D;--blue-400:#4A72B8;--blue-050:#EEF2FA;
--white:#FFFFFF;--gray-050:#F7F8FA;--gray-100:#F1F3F6;--gray-200:#E4E7EC;--gray-300:#DDE1E7;--gray-500:#8A929E;--gray-700:#5A6472;--charcoal:#23282E;
--warm-050:#F6F3EF;--warm-100:#EFEBE4;--warm-300:#D8CFC2;
--wood-600:#7A5C3E;--wood-500:#8A6A4B;--wood-300:#C0A484;--wood-100:#E7DACA;
--success-600:#2E7D5B;--warning-600:#A9711A;--error-600:#B3372C;--error-050:#FBF0EE;

--color-primary:var(--navy-800);--color-primary-hover:var(--navy-600);--color-primary-deep:var(--navy-900);
--color-secondary:var(--blue-500);--color-secondary-hover:var(--blue-600);
--color-accent:var(--blue-500);--color-accent-wood:var(--wood-500);
--surface-page:var(--white);--surface-alt:var(--gray-100);--surface-warm:var(--warm-050);--surface-card:var(--white);--surface-navy:var(--navy-800);--surface-navy-deep:var(--navy-900);--surface-tint:var(--navy-050);
--text-heading:var(--navy-800);--text-body:var(--charcoal);--text-muted:var(--gray-700);--text-faint:var(--gray-500);--text-on-navy:#FFFFFF;--text-on-navy-muted:#C6D2E2;--text-link:var(--blue-600);--text-link-hover:var(--navy-800);
--border-default:var(--gray-300);--border-strong:var(--gray-500);--border-on-navy:rgba(255,255,255,.22);--border-accent:var(--blue-500);
--overlay-navy:rgba(11,37,69,.72);--overlay-navy-soft:rgba(11,37,69,.42);--overlay-scrim:rgba(7,26,49,.34);
--focus-ring:var(--blue-500);
}

/* ---- fonts.css ----
 * 正本はGoogle Fonts @import経由でNoto Sans JP/Noto Serif JPを読み込む構成。
 * 本番はwoff2サブセットをself-hostする方針（合法に入手できるファイルがリポジトリに
 * 無いため、今回は取得していない＝要配置）。ローカル確認では下記フォールバック
 * スタック（正本のfonts.cssにも同じ値で定義されている）でOSの日本語フォントへ委ねる。
 *
 * 要配置: assets/fonts/ に Noto Sans JP / Noto Serif JP の woff2 サブセットを配置し、
 * 下に @font-face を追加した上で、--font-sans / --font-serif の先頭に
 * ファミリー名を追加すること。
 */
:root{
--font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
--font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
--font-num:"Noto Sans JP",system-ui,sans-serif;
}

/* ---- typography.css ---- */
:root{
--fs-display:clamp(32px,4.4vw,56px);
--fs-h1:clamp(30px,3.6vw,48px);
--fs-h2:clamp(26px,2.9vw,40px);
--fs-h3:clamp(20px,1.6vw,24px);
--fs-h4:18px;
--fs-lead:clamp(16px,1.3vw,19px);
--fs-body-l:18px;
--fs-body:16px;
--fs-small:14px;
--fs-caption:13px;
--fs-eyebrow:13px;
--fs-stat:clamp(34px,3.4vw,48px);
--fs-stat-sm:28px;
--fs-nav:15px;
--fs-btn:16px;
--lh-display:1.4;
--lh-heading:1.5;
--lh-h3:1.6;
--lh-body:1.9;
--lh-body-loose:2;
--lh-tight:1.3;
--lh-flat:1;
--fw-light:300;
--fw-regular:400;
--fw-medium:500;
--fw-bold:700;
--fw-serif-regular:400;
--fw-serif-medium:500;
--fw-serif-semibold:600;
--ls-display:.04em;
--ls-heading:.03em;
--ls-body:.02em;
--ls-eyebrow:.18em;
--ls-num:.01em;
--type-display:var(--fw-serif-medium) var(--fs-display)/var(--lh-display) var(--font-serif);
--type-h2:var(--fw-serif-medium) var(--fs-h2)/var(--lh-heading) var(--font-serif);
--type-h3:var(--fw-bold) var(--fs-h3)/var(--lh-h3) var(--font-sans);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
--type-body-l:var(--fw-regular) var(--fs-body-l)/var(--lh-body-loose) var(--font-sans);
--type-small:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-sans);
--type-eyebrow:var(--fw-medium) var(--fs-eyebrow)/var(--lh-flat) var(--font-sans);
--type-stat:var(--fw-medium) var(--fs-stat)/var(--lh-flat) var(--font-num);
}

/* ---- spacing.css ---- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:56px;--space-9:72px;--space-10:96px;--space-11:120px;--space-12:160px;
--space-section:clamp(64px,8vw,120px);--space-section-tight:clamp(48px,5.6vw,80px);--space-heading-gap:clamp(32px,3.6vw,56px);
--container:1200px;--container-gutter:clamp(20px,4vw,40px);--content-wide:1440px;--content-narrow:800px;--content-text:680px;
--gap-card:clamp(20px,2.2vw,32px);--gap-card-tight:16px;--gap-inline:12px;
--radius-sm:2px;--radius-md:4px;--radius-lg:6px;--radius-pill:999px;
--control-h:56px;--control-h-sm:44px;--tap-min:44px;--border-w:1px;--rule-w:1px;--bar-w:3px;
}

/* ---- media.css ---- */
:root{
--ar-hero:16/9;
--ar-hero-sp:3/4;
--ar-hero-inset:4/3;
--ar-portrait:4/5;
--ar-portrait-sp:1/1;
--ar-treatment:4/3;
--ar-equipment:3/2;
--ar-interior:16/9;
--ar-interior-sp:4/3;
--ar-exterior:3/2;
--ar-case:1/1;
--ar-card:16/10;
--focal-hero:50% 40%;
--focal-portrait:50% 25%;
--focal-default:50% 50%;
--img-filter:saturate(.96) contrast(1.02);
--img-filter-navy-band:saturate(.9) brightness(.92);
--img-radius:var(--radius-md);
}

/* ---- elevation.css ---- */
:root{
--shadow-none:none;
--shadow-card:0 1px 2px rgba(11,37,69,.05),0 8px 24px rgba(11,37,69,.06);
--shadow-card-hover:0 2px 4px rgba(11,37,69,.06),0 14px 34px rgba(11,37,69,.10);
--shadow-header:0 1px 0 rgba(11,37,69,.10);
--shadow-header-scrolled:0 2px 12px rgba(11,37,69,.10);
--shadow-inset-image:inset 0 0 0 1px rgba(11,37,69,.06);
--ease-standard:cubic-bezier(.22,.61,.36,1);
--ease-out:cubic-bezier(.16,.84,.44,1);
--dur-fast:120ms;
--dur-base:200ms;
--dur-slow:320ms;
--dur-reveal:600ms;
--transition-base:all var(--dur-base) var(--ease-standard);
}

/* ---- base.css（グローバルリセット + レイアウト/タイポユーティリティ） ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
img,picture,svg,video{display:block;max-width:100%}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:.25em;transition:color var(--dur-base) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
/* Client Feedback R1 §7: 汎用 a:hover（Navy 800）は White surface を前提にした既定色。
 * Navy surface 上のプレーンリンク（component 側で個別の hover 色を持たない場合）に
 * そのまま適用されると、文字が背景へ同化する（クライアント指摘の再現ケース）。
 * Codexレビュー指摘: 当初はコンテナ単位（#doctor a:hover 等）で一括上書きしていたが、
 * #doctor はID selectorのため詳細度が .md-btn--onNavy:hover 等の既存component hoverより
 * 高くなり、正しく動いていたbutton/text-linkの hover まで壊していた（color:inheritで
 * 予期しない継承色になり、opacityがbutton全体の背景/borderまで薄める）。
 * button/text-linkは既存variant hover（components.css）に任せ、ここでは実際に
 * 専用hoverを持たないプレーンリンクだけを個別に対象化する。 */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
button{font:inherit}
::selection{background:var(--navy-050)}

.md-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--container-gutter)}
.md-container--narrow{max-width:var(--content-narrow)}
.md-container--wide{max-width:var(--content-wide)}
.md-section{padding-block:var(--space-section)}
.md-section--tight{padding-block:var(--space-section-tight)}
.md-section--alt{background:var(--surface-alt)}
.md-section--tint{background:var(--surface-tint)}
.md-section--warm{background:var(--surface-warm)}
.md-section--navy{background:var(--surface-navy);color:var(--text-on-navy)}

.md-display{font:var(--type-display);letter-spacing:var(--ls-display);color:var(--text-heading)}
.md-h2{font:var(--type-h2);letter-spacing:var(--ls-heading);color:var(--text-heading)}
.md-h3{font:var(--type-h3);color:var(--text-heading)}
.md-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-secondary)}
.md-lead{font-size:var(--fs-lead);line-height:var(--lh-body-loose);color:var(--text-body)}
.md-small{font:var(--type-small);color:var(--text-muted)}

.md-prose{max-width:var(--content-text);font:var(--type-body-l);color:var(--text-body)}
.md-prose>*+*{margin-top:1.2em}
.md-prose h2{font:var(--type-h2);letter-spacing:var(--ls-heading);color:var(--text-heading);margin-top:2em}
.md-prose h3{font:var(--type-h3);color:var(--text-heading);margin-top:1.8em}
.md-prose ul,.md-prose ol{padding-left:1.4em}

.md-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.md-visually-hidden:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;margin:0;padding:12px 20px;overflow:visible;clip:auto;white-space:normal;background:var(--color-primary);color:var(--text-on-navy);border-radius:var(--radius-sm);z-index:100}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}