/* ==========================================================================
   PeeKaBoo（株式会社エンジン）新テーマ デザイントークン
   ========================================================================== */

:root {
    /* ---- 1. パレット（原色。コンポーネントから直接使わない） ---- */
    --palette-ink: #222222;
    --palette-white: #ffffff;
    --palette-navy: #183956;
    --palette-blue: #528db4;
    --palette-coral: #d96c60;
    /* サンプリング */
    --palette-orange: #c4770e;
    /* イベント */
    --palette-teal: #558f96;
    /* モニタリング */
    --palette-gray-100: #f5f5f5;
    --palette-gray-300: #dddddd;
    --palette-gray-400: #d9d9d9;
    --palette-gray-500: #aaaaaa;
    --palette-gray-600: #888888;
    --palette-cream-50: #faf8f7;
    --palette-cream-100: #fbf3ef;
    --palette-cream-line: #e4d9d4;

    /* ---- 2. 役割トークン（実装はこちらを使う） ---- */
    --color-text: var(--palette-ink);
    --color-text-inverse: var(--palette-white);
    --color-text-muted: var(--palette-gray-600);
    /* 配布地域・日付などのメタ */
    --color-text-disabled: var(--palette-gray-500);
    /* ページャの非活性 */
    --color-link: var(--palette-navy);
    /* 「一覧を見る」等のテキストリンク */

    --color-bg: var(--palette-white);
    --color-bg-muted: var(--palette-gray-100);
    /* グレー面（表ラベル・帯） */
    --color-bg-warm: var(--palette-cream-50);
    /* 大きなセクション面 */
    --color-bg-band: var(--palette-cream-100);
    /* 下層ページ見出し帯・FV 面 */
    --color-bg-dark: var(--palette-navy);
    /* フッター・ダーク帯 */
    --color-overlay: color-mix(in srgb, var(--palette-navy) 50%, transparent);
    /* ハンバーガーメニュー表示中の背面（カンプ実測: ネイビー 50%） */
    --color-overlay-band: color-mix(in srgb, var(--color-bg-band) 90%, transparent);
    /* 下層ページタイトル帯の写真に重ねる色（カンプ実測: 帯色 90%） */

    --color-border: var(--palette-gray-300);
    /* カード枠・一覧の区切り線 */
    --color-border-warm: var(--palette-cream-line);
    /* クリーム面上の区切り線 */
    --color-border-strong: var(--palette-ink);
    /* SP の細い罫線 */
    --color-border-inverse: color-mix(in srgb, var(--palette-white) 20%, transparent);
    /* 紺面上の区切り線（SP フッターのメニュー） */

    --color-primary: var(--palette-navy);
    /* 主要ボタン・フィルタ「すべて」・業種バッジ */
    --color-number: var(--palette-blue);
    /* FV の実績数値・図解の強調 */
    --color-footer-dot: var(--palette-gray-400);
    /* フッターリストの行頭点 */

    /* サービスアクセント（--color-accent*）は 7 章、お知らせカテゴリ色（--color-category）は 8 章で定義 */

    --gradient-hero: linear-gradient(180deg, var(--palette-white) 0%, var(--palette-cream-50) 100%);

    /* ---- 3. タイポグラフィ ---- */
    --font-sans: "Noto Sans JP", sans-serif;

    --leading-tight: 1.2;
    /* 見出し・ラベル・ボタン */
    --leading-body: 1.7;
    /* 本文 */
    --leading-card: 1.5;
    /* カード内の説明文・アイコン下ラベル */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    /* サイズは design.md「2. 文字」のスタイル名と 1 対 1。ここは SP 値、PC は 3.1 で上書き */
    --text-display: 24px;
    /* TOP の FV キャッチ */
    --text-display-service: 28px;
    /* サービス LP の FV キャッチ */
    --text-display-sub: 16px;
    /* FV キャッチの上の 1 行 */
    --text-h2: 24px;
    /* セクション見出し・下層ページタイトル */
    --text-h3: 18px;
    /* 小見出し・カード群のタイトル */
    --text-lead: 20px;
    /* 太字リード文（TOP・サービス LP のみ） */
    --text-feature-title: 18px;
    /* 特徴ブロックの 2 行タイトル */
    --text-article-h3: 16px;
    /* 記事本文の小見出し（h3）・目次の項目 */
    --text-body: 14px;
    /* 本文・記事本文（body-strong も共通） */
    --text-ui: 16px;
    /* ナビ・ボタン・フッターリンク */
    --text-card-title: 16px;
    /* カード見出し・一覧タイトル */
    --text-card-text: 14px;
    /* カード内説明文 */
    --text-label: 14px;
    /* バッジ・チップ・日付・メタ情報 */
    --text-caption: 12px;
    /* 下層ページタイトルの英字・SP フッター下段リンク */
    --text-xs: 10px;
    /* 注釈（※〜）・SP コピーライト */
    --text-number: 18px;
    /* FV の実績数値 */
    --text-number-lg: 40px;
    /* 数値カードの数値 */
    --text-flow-num: 20px;
    /* 流れ（FLOW）のバッジの番号 */
    --text-flow-label: 10px;
    /* 流れのバッジの「FLOW」 */
    --text-flow-text: 14px;
    /* 流れの説明文 */

    /* 強調用（見出しの一部だけを大きくする。色は --color-accent） */
    --text-display-em: 28px;
    /* FV キャッチの強調語 */
    --text-h2-em: 36px;
    /* セクション見出しの強調語（「4つ」等） */

    /* ---- 4. 余白スケール（この 9 段以外を使わない） ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 80px;
    --space-9: 100px;

    /* レイアウト専用 */
    --container: 1024px;
    /* 標準コンテナ（実績・サービス・TOP） */
    --container-narrow: 960px;
    /* 記事・お知らせ一覧・サイトマップ */
    --container-wide: 1152px;
    /* TOP・サービス LP の FV とサービス紹介面 */
    --gutter: 30px;
    /* 画面端の余白（SP） */
    --section-pad: var(--space-7);
    /* セクション上下（SP） */
    --content-gap: var(--space-5);
    /* 見出し→本文（SP） */

    /* ---- 5. 角丸・線・影 ---- */
    --radius-sm: 5px;
    /* バッジ・チップ・ヘッダー CTA */
    --radius-md: 10px;
    /* カード・画像・パネル・吹き出し */
    --radius-pill: 9999px;
    /* 高さ 50 のボタン・帯ラベル */
    --border-w: 1px;
    --border-w-accent: 2px;
    /* アクセント枠のカード・図解の矢印 */
    /* 影: デザインに存在しないため定義しない */

    /* ---- 6. 固定寸法（コンポーネントの実測。増やすときは確認） ---- */
    --header-h: 60px;
    --header-logo-h: 40px;
    /* SP はカンプ未提供のため仮 */
    --footer-logo-h: 40px;
    /* SP はカンプ未提供のため仮 */
    --footer-mark-h: 44px;
    /* プライバシーマーク */
    --dot-size: 6px;
    /* フッターリストの行頭点 */
    --btn-h: 50px;
    --btn-w: 330px;
    /* SP は幅いっぱい（390 - 30 × 2） */
    --btn-w-fv: 330px;
    /* FV 用ボタン（SP カンプの FV にボタンは無いため、通常と同じ幅いっぱい） */
    --btn-w-cta: 330px;
    /* CTA セクション用ボタン */
    --btn-arrow-size: 30px;
    /* ボタン右端の丸矢印 */
    --btn-arrow-offset: 10px;
    /* 丸矢印とボタン端の距離 */
    --heading-bar-w: 5px;
    --heading-bar-h: 28px;
    /* 見出し左の縦バー（SP カンプ実測） */
    --page-title-chara-h: 60px;
    /* 下層ページタイトル帯のキャラクター画像の高さ */
    --flow-badge-w: 63px;
    --flow-badge-h: 56px;
    /* 流れの番号バッジ（豚の顔の形） */
    --flow-icon: 60px;
    /* 流れのアイコン枠 */
    --flow-line-w: 2px;
    /* バッジをつなぐ縦線 */
    --flow-arrow-w: 20px;
    --flow-arrow-h: 10px;
    /* 区切り線の下向き三角 */
    --badge-h: 33px;
    --badge-px: 10px;
    /* バッジの左右余白（カンプ実測） */
    --card-w: 320px;
    --card-img-h: 213px;
    --cta-photo-w: 344px;
    --cta-photo-ratio: 344 / 238;
    /* CTA セクションの写真（PC 幅・縦横比。SP は幅いっぱいで同じ比率） */
    --cta-point: 130px;
    /* CTA セクションの丸（相談無料など） */
    --cta-chara-w: 250px;
    /* CTA セクションのキャラクター画像の幅 */
    --news-row-h: 83px;
    --hit-min: 44px;
    /* タップ領域の最小 */
    --drawer-w: 390px;
    /* ハンバーガーメニューのパネル幅（カンプ実測） */
    --drawer-gutter: 30px;
    /* パネル内の左右余白。PC で --gutter が 128 に変わるため別に持つ */
    --fixed-cta-h: 60px;
    /* SP の追従ボタンの高さ */
    --logo-h: 50px;
    --logo-max-w: 160px;
    /* 取引企業ロゴ 1 つの枠（高さ・最大幅。カンプの最大サイズ） */
    --logo-marquee-speed: 4s;
    /* 取引企業ロゴが 1 つ分流れる時間（ロゴの数に比例して 1 周の時間が決まる） */
}

/* ---- 3.1 PC 上書き（md 以上）。PC と SP で値が変わるものだけ書く ---- */
@media (min-width: 768px) {
    :root {
        --text-display: 32px;
        --text-display-service: 32px;
        --text-display-sub: 24px;
        --text-display-em: 40px;
        --text-h2-em: 48px;
        --text-h2: 32px;
        --text-h3: 20px;
        --text-article-h3: 18px;
        --text-lead: 24px;
        --text-body: 16px;
        --text-number: 28px;

        --header-h: 80px;
        --header-logo-h: 50px;
        --heading-bar-h: 46px;
        --page-title-h: 300px;
        --page-title-chara-h: 100px;
        /* md〜lg はコンテナが狭く、214 だと説明文に重なるため小さくする */
        --footer-logo-h: 50px;
        --btn-w: 300px;
        --btn-w-fv: 248px;
        --btn-w-cta: 276px;
        --logo-h: 70px;
        --logo-max-w: 250px;
        --cta-chara-w: 320px;
        --gutter: var(--space-7);
        /* 画面端の最小余白。1280 幅では 1024 コンテナの左右が自然に 128 になる */
        --section-pad: var(--space-9);
        --content-gap: var(--space-7);
    }
}

/* ---- 3.2 lg 以上の上書き ---- */
@media (min-width: 1024px) {
    :root {
        --page-title-chara-h: 214px;
        --text-flow-num: 24px;
        --text-flow-label: 12px;
        --text-flow-text: 20px;
        --flow-badge-w: 87px;
        --flow-badge-h: 77px;
        --flow-title-w: 160px;
        /* 流れのタイトル列（最長の「指定日に園へ到着」が 1 行に収まる幅） */
        --flow-line-w: 3px;
        --flow-arrow-w: 18px;
        --flow-arrow-h: 9px;
    }
}

/* ---- 7. サービス別テーマ切替 ----
   <body data-service="sampling|event|monitoring"> または
   セクション単位 <section data-service="event"> で切り替える。
   コンポーネント側は必ず --color-accent* を参照する（原色を直接書かない）
   data-service が無いときはサンプリング色になる */
:root,
[data-service="sampling"] {
    --color-accent: var(--palette-coral);
    --color-accent-tint: #f7e2df;
    /* アクセント 20% 相当。カード内の淡い面 */
    --color-accent-soft: #fbf0f0;
    /* アクセント 10% 相当。さらに淡い面 */
    --color-accent-bg: var(--palette-cream-100);
    /* サービス紹介セクションの背景 */
}

[data-service="event"] {
    --color-accent: var(--palette-orange);
    --color-accent-tint: #f3e4cf;
    --color-accent-soft: #f9f1e7;
    --color-accent-bg: #fef6e9;
}

[data-service="monitoring"] {
    --color-accent: var(--palette-teal);
    --color-accent-tint: #dde9ea;
    --color-accent-soft: #eef4f4;
    --color-accent-bg: #ecf3f3;
}

/* ---- 8. お知らせカテゴリ色 ----
   色はカテゴリごとに inc/news.php が決め、行・チップの style で --color-category を渡す。
   管理画面で色の指定が無いカテゴリは、下の自動の色を古い順に割り当てる */
:root {
    --color-category-auto-1: var(--palette-coral);
    --color-category-auto-2: var(--palette-teal);
    --color-category-auto-3: var(--palette-orange);
    --color-category-auto-4: var(--palette-blue);
}