/**
 * デザイントークン — 大倉山アール歯科
 * 根拠: docs/10_トンマナ_FigmaMake用.md（Figma実測値・2026-08-17監査済み）
 * このファイルにはカスタムプロパティ宣言以外を書かないこと。
 */
:root {
	/* --- ブランド色（500番）: 地・罫線・アイコン専用。文字に使わない --- */
	--color-primary:   #FD920F; /* ブライトオレンジ。CTAの地・ロゴ・枠線 */
	--color-secondary: #4A90A8; /* ティール。タグ枠線・アイコン */

	/* --- 文字用（700番）: WCAG AA 適合 --- */
	--color-text:           #4A4038; /* 暖色チャコール。見出し・本文・フッター背景 */
	--color-text-accent:    #AB5F01; /* オレンジ文字・リンク・ホバー地 */
	--color-text-secondary: #3E7A8E; /* ティール文字（Eyebrow・連番） */
	--color-text-muted:     #7A7163; /* 本文サブテキスト */

	/* --- 面・罫線 --- */
	--color-base:     #FFFFFF;
	--color-bg-cream: #FDF7EF;
	--color-bg-sand:  #EDD8BC;
	--color-line:     #EDD8BC;
	--color-bg-icegray: #f4f4f4;

	/* --- フォントファミリー --- */
	--font-heading: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	--font-body:    "Noto Sans JP", sans-serif;
	--font-en:      "Josefin Sans", sans-serif;

	/* --- タイプスケール（本文16px基準・SPは流動） --- */
	/* 2026-09-16: graphic section headings and numbered accents */
	--fs-hero-sp: clamp(1.75rem, 8.72vw, 2.125rem);
	--fs-usp-pc: clamp(0.875rem, 1.4vw, 1.3125rem);
	--fs-statement-compact: clamp(0.875rem, 4.4vw, 1.125rem);
	--fs-section-en: clamp(2rem, 5vw, 4rem);
	--fs-section-en-compact: 2rem;
	--fs-number-graphic: clamp(3rem, 5vw, 4rem);
	--ls-section-en: 0.075em;
	--graphic-gap: 0.75rem;
	--number-accent-width: 3.75rem;
	--number-accent-height: 0.25rem;
	--highlight-height: 0.3125rem;
	--radius-usp: 1.5rem;
	--fs-eyebrow:   0.75rem;   /* 12px 英字ラベル */
	--fs-caption:   0.8125rem; /* 13px タグ・バッジ */
	--fs-note:      0.875rem;  /* 14px 注記 */
	--fs-nav:       0.9375rem; /* 15px ナビ・ボタン */
	--fs-body:      1rem;      /* 16px 本文基準 */
	--fs-title-s:   1.125rem;  /* 18px カード見出し小 */
	--fs-title:     1.1875rem; /* 19px カード見出し */
	--fs-lead:      1.3125rem; /* 21px リード文 */
	--fs-h3:        clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);     /* 20→24px */
	--fs-h2:        clamp(1.4375rem, 1.25rem + 0.85vw, 1.75rem); /* 23→28px */
	--fs-statement: clamp(1.625rem, 1.35rem + 1.3vw, 2.125rem);  /* 26→34px */
	--fs-h1:        clamp(2.125rem, 1.55rem + 2.7vw, 3.625rem);  /* 34→58px */

	/* --- 行間・字間 --- */
	--lh-body:    1.95;
	--lh-heading: 1.5;
	--lh-tight:   1.22; /* H1 */
	--ls-eyebrow: 0.28em; /* Josefin Sans 大文字 */

	/* --- スペーシング（1442pxカンプ実測を流動化） --- */
	--space-section-x: clamp(1.25rem, 7.2vw, 6.5rem);  /* 20→104px */
	--space-section-y: clamp(2.75rem, 5.5vw, 4rem);    /* 44→64px */
	--space-header-x:  clamp(1rem, 3.9vw, 3.5rem);     /* 16→56px */
	--space-3xs:       0.25rem;
	--gap-cards:       clamp(1.25rem, 2.8vw, 2.5rem);  /* 20→40px */

	/* --- 形状 --- */
	--radius: 0.75rem; /* 12px。原則この1本。角を立てる要素は 0 のまま */
	--radius-feature: 2.25rem; /* 36px。トップ特徴セクションの大判画像専用（DECISIONS #11） */

	/* --- レイアウト --- */
	--container: 77.125rem; /* 1234px = 1442 - 104*2 */
	/* .l-inner の外端から画面端までの余白。ワイド画面で右寄せの写真が
	   コンテンツ幅より外へ出ないようにするために使う */
	--inner-gutter: max(0px, calc((100% - var(--container) - var(--space-section-x) * 2) / 2));

	/* --- タップ領域 --- */
	--tap-min: 2.75rem; /* 44px */

	/* --- Arkhe 親テーマ変数の上書き（二重管理防止: 値は上のトークンを参照） --- */
	--ark-color_main:   var(--color-primary);
	--ark-color_text:   var(--color-text);
	--ark-color_link:   var(--color-text-accent);
	--ark-color_border: var(--color-line);
	--ark-color_bg:     var(--color-base);
	--ark-font_family:  var(--font-body);
	--ark-font_size:    100%; /* 親の min(16px,4vw) を無効化。rem基準は常に16px（docs/10: 本文16px・高齢読者向け級数） */
}