@charset "UTF-8";

/*
 * fricco の色とロゴ。
 *
 * ===== 基本コンセプト（2026-09-17 カラー・デザイン指示）=====
 *   「チャコールブラック × ホワイト × オレンジ」
 *   経理システムとしての信頼感・視認性を保ちながら、明るく、シンプルで、
 *   親しみやすい SaaS の UI にする。HubSpot の親しみやすさを参考にしつつ模倣はしない。
 *
 * ===== 配色比率 =====
 *   ホワイト・アイボリー 約70% ／ チャコールブラック 約15% ／ グレー 約10% ／ オレンジ 約5%
 *   オレンジは「ユーザーに押してほしい場所」（主 CTA・選択状態・重要ボタン・リンク）にだけ使う。
 *   画面全体に使いすぎない。ブルーを主色にしない。グラデーションは原則使わない。
 *
 * ===== 変数名について =====
 *   レイアウト用 CSS（fricco-admin.css / fricco-auth.css）は chapix から引き継いだため、
 *   変数名も chapix の名前（--navy / --amber など）のまま残し、値だけを fricco の配色に
 *   差し替えている。意味は下の対応表のとおり。新しく書く CSS は意味名（--primary など）を使うこと。
 *
 *     --navy    = 主色（fricco オレンジ）。主ボタン・リンク・選択状態
 *     --navy-d  = 主色の hover（濃いオレンジ）
 *     --navy-l  = フォーカスリング・選択中の項目（オレンジ）
 *     --amber   = 注意（Warning）。琥珀ではなく警告色として使う
 *     --tint    = 選択中の行・タブの地（Orange Light）
 *
 * 色はここ以外に直書きしない。
 */

:root {
	/* ===== ブランド ===== */
	/* Primary Orange。主 CTA・選択状態・重要ボタン・リンク・アイコンのアクセント */
	--primary: #FF5C1A;
	/* ロゴ固有の色（fricco Logo A.dc.html の colors。UI の配色とは分けて持つ） */
	--logo-ink: #1C2230;
	--logo-accent: #F25C1F;
	/* 主ボタンの hover */
	--primary-d: #E64F12;
	/* Orange Light。強調カード・選択背景・バナー背景 */
	--primary-bg: #FFF1E8;
	/* Orange Pale。ヒーロー領域・補助的な背景 */
	--primary-pale: #FFF8F3;

	/* ===== サイドメニュー（チャコールブラック。濃紺にしない） ===== */
	--sb-bg: #202326;
	--sb-bg-2: #25282A;
	/* 通常メニューの文字 */
	--sb-text: #E5E7EB;
	--sb-text-strong: #FFFFFF;
	/* 補助文字 */
	--sb-mute: #AEB4BA;
	--sb-line: rgba(255, 255, 255, .10);
	--sb-hover: rgba(255, 255, 255, .08);

	/* ===== メイン画面 ===== */
	/* 完全な白ではなく、ごく薄いウォームホワイト */
	--bg: #FAFAF8;
	--card: #FFFFFF;
	--line: #E5E7EB;
	/* 本文 */
	--ink: #1F2937;
	--ink-strong: #172B4D;
	/* 補助文字 */
	--mute: #667085;
	/* 表の見出しや hover の地 */
	--surface-2: #F3F4F6;

	/* ===== ステータス ===== */
	--ok: #16A36A;
	--ok-bg: #EAF8F1;
	--warning: #F59E0B;
	--warning-bg: #FFF4E0;
	--warning-ink: #7A4A00;
	--warn: #E5484D;
	--warn-bg: #FDECEC;
	--info: #2563EB;
	--info-bg: #EAF0FD;

	/* ===== chapix 由来の変数名（値は fricco の配色。上の対応表を参照） ===== */
	--navy: var(--primary);
	--navy-d: var(--primary-d);
	--navy-l: var(--primary);
	--amber: var(--warning);
	--amber-d: #D98806;
	--amber-ink: var(--warning-ink);
	--amber-bg: var(--warning-bg);
	--tint: var(--primary-bg);
	--cream: var(--primary-pale);
	--cream-line: #F1E4DA;

	/* ===== レイアウト ===== */
	/* サイドバーの幅 */
	--sb: 224px;
	/* 角丸。8〜12px */
	--radius: 8px;
	--radius-l: 12px;
	/* 控えめな影 */
	--shadow: 0 1px 2px rgba(16, 24, 40, .04);

	/* ===== フォント ===== */
	--font-base: "Zen Kaku Gothic New", system-ui, "Hiragino Kaku Gothic ProN",
		"Yu Gothic UI", Meiryo, sans-serif;
	/* 数字とワードマーク。等幅数字にして桁を揃える */
	--font-num: "Jost", "Century Gothic", Futura, "Avenir Next", sans-serif;
}

/* 数字は桁を揃える。金額の一覧で行がずれないように */
.num {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
}

/* ===== ロゴのロックアップ（仮。正式なロゴが決まったら差し替える） ===== */

.fricco-logo {
	display: flex;
	align-items: center;
	gap: 16px;
}

.fricco-logo__mark {
	width: 56px;
	height: 56px;
	flex: none;
}

.fricco-logo__divider {
	width: 1px;
	align-self: stretch;
	margin: 4px 0;
	background: rgba(31, 41, 55, .2);
}

.fricco-logo__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* ワードマーク「fricco」。Outfit 700、i の点だけオレンジ（fricco Logo A.dc.html 03 — wordmark）。
   i は点なしの ı を置き、点を丸で描く。色はロゴ固有の値（アプリの配色トークンとは別に持つ） */
.fricco-logo__word {
	font-family: "Outfit", var(--font-num);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--logo-ink);
}

.fricco-logo__i {
	position: relative;
	display: inline-block;
}

.fricco-logo__dot {
	position: absolute;
	left: 50%;
	top: 0;
	width: .19em;
	height: .19em;
	margin-left: -.08em;
	border-radius: 50%;
	background: var(--logo-accent);
}

/* 一体型ワードマーク（fricco Logo A.dc.html 03b）。f をシンボルに置き換え、rıcco を続ける。
   大きさは font-size で決まる（f は .86em） */
.fricco-wordmark {
	display: flex;
	align-items: flex-end;
	font-size: 56px;
	line-height: 1;
}

.fricco-wordmark__f {
	height: .86em;
	width: .86em;
	margin-right: -.2em;
	margin-bottom: .1em;
	flex: none;
}

.fricco-wordmark__text {
	font-family: "Outfit", var(--font-num);
	font-size: 1em;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--logo-ink);
}

/* サイドバーなどの小さい表示 */
.fricco-logo__word--sm {
	font-size: 19px;
}

.fricco-wordmark--sm {
	font-size: 22px;
}

aside .logo .fricco-wordmark__text {
	color: #fff;
}

/* 濃色の背景に置く場合（サイドバー）。点はオレンジのまま */
.fricco-logo--light .fricco-logo__word,
aside .logo .fricco-logo__word {
	color: #fff;
}

.fricco-logo__kana {
	font-family: var(--font-base);
	font-size: 13px;
	letter-spacing: .3em;
	line-height: 1;
	color: var(--mute);
	/* letter-spacing は最後の字の後ろにも入る。その分を戻して中央に見せる */
	margin-right: -.3em;
}

/* 縦組み。狭い画面や、上下に余白の取れる画面で使う */
.fricco-logo--stacked {
	flex-direction: column;
	gap: 16px;
}

.fricco-logo--stacked .fricco-logo__divider {
	display: none;
}

.fricco-logo--stacked .fricco-logo__text {
	align-items: center;
}

/* 濃色の背景に置く場合。マークは logo-symbol-light.svg に差し替えること */
.fricco-logo--light .fricco-logo__word,
.fricco-logo--light .fricco-logo__kana {
	color: #fff;
}

.fricco-logo--light .fricco-logo__x {
	color: var(--primary);
}

.fricco-logo--light .fricco-logo__divider {
	background: rgba(255, 255, 255, .25);
}