/**
 * デザインの変数（デザイントークン）
 *
 * 色・文字・余白などの値に名前を付けてここにまとめ、ほかの CSS はすべて var(--名前) で参照する。
 * こうしておくと、子テーマは「この変数だけ」を上書きすれば、サイト全体の色や雰囲気を変えられる。
 *
 *   例）子テーマの style.css で
 *       :root { --locus-color-primary: #0f766e; }
 *       と書くと、ボタン・リンク・見出しの飾りなど、メインカラーを使っている所が全部変わる。
 *
 * 子テーマで上書きするのは原則この変数だけ、という約束にしておくと、
 * 親テーマを更新したときに子テーマが壊れにくい。
 *
 * 名前の頭の「--locus-」は、プラグインの CSS 変数と名前がぶつからないようにするための印。
 */

:root {
	/* ── 色 ─────────────────────────────── */

	/* メインカラー: リンク・ボタン・見出しの飾り・強調する背景 */
	--locus-color-primary: #1d4ed8;
	/* 濃いメインカラー（ボタンにマウスを乗せたとき）。メインカラーから自動で作るので、子テーマで上書きしなくてよい */
	--locus-color-primary-dark: color-mix(in srgb, var(--locus-color-primary) 78%, #000);
	/* 薄いメインカラー（淡い背景）。同じく自動 */
	--locus-color-primary-light: color-mix(in srgb, var(--locus-color-primary) 8%, #fff);
	/* メインカラーの上に載せる文字の色 */
	--locus-color-on-primary: #fff;
	/*
	 * 飾り用の明るいメインカラー: 背景の図形・アイコン・線など、上に文字を載せない所に使う。
	 * 明るい色は白い文字が読みにくいので、ボタンや文字にはふつうのメインカラーを使い、こちらは飾りだけにする。
	 * 初めはメインカラーと同じ。子テーマで明るい色を入れると、飾りだけが明るくなる。
	 */
	--locus-color-primary-vivid: var(--locus-color-primary);

	/* アクセントカラー: 申し込み・問い合わせなど「一番押してほしいボタン」の色 */
	--locus-color-accent: #c2410c;
	--locus-color-accent-dark: color-mix(in srgb, var(--locus-color-accent) 80%, #000);
	--locus-color-on-accent: #fff;
	--locus-color-accent-light: color-mix(in srgb, var(--locus-color-accent) 10%, #fff);

	/* 文字・背景・線 */
	--locus-color-text: #1f2933;
	--locus-color-text-muted: #5b6776;
	--locus-color-bg: #fff;
	--locus-color-bg-alt: #f4f6f9;
	--locus-color-border: #dde3ea;

	/* 入力の誤りを知らせる色（お問い合わせフォーム）。白い背景の上で読める濃さの赤 */
	--locus-color-error: #c62828;

	/* 蛍光ペンの線（u-marker） */
	--locus-color-marker: #fde68a;

	/* フッター */
	--locus-color-footer-bg: #1f2933;
	--locus-color-footer-text: #e5e9ef;

	/* ── 文字 ───────────────────────────── */

	/*
	 * 文字の種類（フォント）。Web フォントを読み込まず、端末に入っている文字を使う（表示が速いため）。
	 * Mac/iPhone は英数字を San Francisco、日本語をヒラギノで、Windows は游ゴシック・メイリオで表示する。
	 */
	--locus-font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;

	/* 見出しの書体と太さ。初めは本文と同じ書体・太字。太さが選べる Web フォントを使うサイトは、子テーマで 800 などにする */
	--locus-font-heading: var(--locus-font-sans);
	--locus-font-weight-heading: 700;

	/* 文字の大きさ。clamp(最小, 画面幅に合わせた値, 最大) で、スマホでは小さく PC では大きくなめらかに変わる */
	--locus-font-size-sm: 0.875rem;
	--locus-font-size-base: 1rem;
	--locus-font-size-lg: 1.125rem;
	--locus-font-size-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem);
	--locus-font-size-h2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
	--locus-font-size-h1: clamp(1.6rem, 1.3rem + 1.5vw, 2.5rem);
	--locus-font-size-hero: clamp(1.9rem, 1.3rem + 2.8vw, 3.5rem);

	/*
	 * 本文の中の見出し（ブログ記事・法務のページなど、prose.css）。
	 * 読む文の途中の区切りなので、ページの欄の見出し（h2 の大きさ）より小さく、太さも一段落とす。
	 */
	--locus-font-size-prose-h2: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	--locus-font-size-prose-h3: clamp(1.075rem, 1.025rem + 0.25vw, 1.2rem);
	--locus-font-weight-prose-heading: 700;

	/* 行の高さ。日本語は漢字・かなが詰まって見えやすいので、英語のサイトより広めにとる */
	--locus-line-height: 1.85;
	--locus-line-height-tight: 1.45;

	/* ── 余白（8px 前後を基準にした段階） ── */
	--locus-space-2xs: 0.25rem;
	--locus-space-xs: 0.5rem;
	--locus-space-sm: 1rem;
	--locus-space-md: 1.5rem;
	--locus-space-lg: 2rem;
	--locus-space-xl: 3rem;
	--locus-space-2xl: 4rem;

	/* セクションの上下の余白。画面が広いほど大きくする */
	--locus-section-padding: clamp(3.5rem, 2.5rem + 4vw, 6rem);

	/* ── 幅 ─────────────────────────────── */
	--locus-container-width: 1120px; /* ふつうの内容の最大幅 */
	--locus-container-narrow: 760px; /* ブログ本文など、読む文章の最大幅（1 行が長すぎると読みにくいため） */
	--locus-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem); /* 画面の左右の余白 */

	/* ── 形 ─────────────────────────────── */
	--locus-radius: 8px;
	--locus-radius-lg: 16px;
	--locus-radius-pill: 999px;
	--locus-shadow: 0 2px 8px rgb(15 23 42 / 0.08);
	--locus-shadow-lg: 0 12px 32px rgb(15 23 42 / 0.12);
	/*
	 * ボタンの下の厚み（押せそうに見せる影）。0 なら平らなボタン。
	 * 4px などにすると、ボタンの真下に濃い色の影が付き、押したときに沈む。
	 */
	--locus-button-depth: 0px;

	/* ── そのほか ────────────────────────── */
	--locus-header-height: 64px;
	--locus-logo-height: 40px; /* ヘッダーのロゴの高さ（幅は縦横比なりに決まる） */
	--locus-transition: 0.2s ease;
	/*
	 * 丸の中の右向き矢印（c-button--arrow・ヘッダーの is-cta）。
	 * 画像ファイルを置かず、SVG の形を CSS の mask（形で切り抜く指定）に使うので、色は文字の色に合わせて変わる。
	 */
	--locus-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10.5 8l4 4-4 4'/%3E%3C/svg%3E");

	/* ── 動き（u-anim・c-marquee）────────── */
	--locus-anim-duration: 0.8s; /* 現れるのにかける時間 */
	--locus-anim-distance: 28px; /* 下から浮かび上がる距離 */
	--locus-anim-easing: cubic-bezier(0.2, 0.7, 0.2, 1); /* 始めは速く、終わりはゆっくり止まる動き */
	--locus-marquee-duration: 40s; /* 流れる英字が 1 周する時間（長いほどゆっくり） */
	--locus-reveal-duration: 1.4s; /* 見出しの幕が開き切るまでの時間（u-anim--reveal・u-anim-load--reveal） */
	--locus-reveal-easing: cubic-bezier(0.37, 0, 0.63, 1); /* ゆっくり始まり、途中で速く、ゆっくり終わる */
}