/* =========================================================
   tokens.css … CSS変数だけを置くファイル
   株式会社システムウォール製作所 コーポレートサイト（C案 アッシュブルー）
   色・文字・余白を変えるときは、まずここを直す
   ========================================================= */
@layer reset, tokens, base, layout, components, cms, pages, utilities, a11y;

@layer tokens {
  :root {
    /* ---------- 色 ---------- */
    /* ロゴ専用（ロゴ画像は支給待ち。いまは文字ロゴの色） */
    --c-brand-logo: #1E2226;

    /* UIパレット：アッシュブルー（お客様指定 #4B6272 を brand-800 に） */
    --c-brand-900: #384B59; /* 濃い：ホバー・フッター */
    --c-brand-800: #4B6273; /* メイン */
    --c-brand-700: #5E7486;
    --c-brand-600: #7A8E9D;
    --c-brand-200: #CFD9E0; /* 罫線・ホバー時の面 */
    --c-brand-100: #DFE8EF; /* 薄い面 */
    --c-brand-50:  #EEF3F6;

    /* 役割名（実装ではこちらを参照する） */
    --c-action-primary:       var(--c-brand-800);
    --c-action-primary-hover: var(--c-brand-900);
    --c-text-on-action:       #FFFFFF;
    --c-surface-emphasis:     var(--c-brand-800); /* 色面のセクション（実績紹介・お問い合わせ） */
    --c-surface-alt:          var(--c-brand-100); /* 薄い面（カード・リスト） */
    --c-surface-alt-hover:    var(--c-brand-200);
    --c-surface-footer:       var(--c-brand-900);

    /* テキスト */
    --c-text:               #1E2226;
    --c-text-muted:         #4A5259;
    --c-text-invert:        #FFFFFF;
    --c-text-invert-muted:  rgba(255, 255, 255, 0.82);

    /* 背景・罫線 */
    --c-bg:          #FFFFFF;
    --c-bg-header:   rgba(255, 255, 255, 0.97);
    --c-line:        var(--c-brand-200);
    --c-line-invert: rgba(255, 255, 255, 0.24);

    /* 動画まわりの暗い面 */
    --c-ink:        #1C1E21;
    --c-ink-hover:  #3A3E43;
    --c-ink-muted:  #C3C8CE;
    --c-backdrop:   rgba(10, 11, 12, 0.92);
    --c-scrim:      linear-gradient(to top, rgba(20, 24, 28, 0.78), rgba(20, 24, 28, 0)); /* 写真の上の文字の下敷き */

    /* シルバーメタリック（差し色） */
    --c-metal:      linear-gradient(120deg, #F3F4F6 0%, #C9CDD2 24%, #F7F8F9 44%, #A7ADB4 68%, #E4E7EA 100%);
    --c-metal-edge: #A7ADB4;

    /* ---------- フォント ---------- */
    --ff-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --ff-head:  "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    --ff-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif; /* MVのキャッチだけ */
    --ff-num:   "Manrope", "Noto Sans JP", sans-serif;          /* 英字ラベル・数字 */

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* 文字サイズ（本文は18px以上：案件ルール） */
    --fs-display: clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem); /* 28-40px MVキャッチ */
    --fs-h2:      clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem); /* 28-40px セクション見出し */
    --fs-h3-lg:   1.75rem;   /* 28px 大きいカードの見出し・電話番号 */
    --fs-h3:      1.375rem;  /* 22px */
    --fs-h4:      1.125rem;  /* 18px */
    --fs-lead:    1.25rem;   /* 20px リード文 */
    --fs-body:    1.125rem;  /* 18px 本文 */
    --fs-small:   0.9375rem; /* 15px ナビ・補足 */
    --fs-eyebrow: 0.9375rem; /* 15px 英字ラベル */

    /* 行間・字間（日本語の見出しは詰めない） */
    --lh-tight:   1.4;
    --lh-heading: 1.6;
    --lh-body:    1.9;
    --lh-loose:   2.1;

    --tr-body:     0.04em;
    --tr-heading:  0.06em;
    --tr-wide:     0.1em;
    --tr-eyebrow:  0.2em;
    --tr-vertical: 0.2em; /* 縦書き */

    /* ---------- 余白（8px基準の10段階） ---------- */
    --sp-1: 0.25rem; /*   4px */
    --sp-2: 0.5rem;  /*   8px */
    --sp-3: 0.75rem; /*  12px */
    --sp-4: 1rem;    /*  16px */
    --sp-5: 1.5rem;  /*  24px */
    --sp-6: 2rem;    /*  32px */
    --sp-7: 3rem;    /*  48px */
    --sp-8: 4rem;    /*  64px */
    --sp-9: 6rem;    /*  96px */
    --sp-10: 8rem;   /* 128px */

    /* セクション余白 */
    --section-py:       clamp(4rem, 8vw, 7.5rem); /* 64-120px：ゆとりで詰まった印象をほどく */
    --section-py-tight: clamp(2.5rem, 5vw, 4rem);

    /* コンテナ */
    --container-max:    1200px;
    --container-narrow: 960px;
    --container-read:   680px; /* 読ませるページの本文幅（ワイヤー12・14） */
    --container-pad:    clamp(1rem, 3vw, 1.5rem);
    --edge:             clamp(0.5rem, 1.2vw, 1rem); /* 色面パネル・写真と画面端のすきま */
    --header-h:         84px;

    /* ---------- 角丸・影 ---------- */
    --r-sm:   4px;
    --r-md:   16px;
    --r-lg:   28px;
    --r-pill: 999px;

    --sh-sm:    0 1px 3px rgba(30, 34, 38, 0.08);
    --sh-md:    0 6px 24px rgba(30, 34, 38, 0.10);
    --sh-lg:    0 24px 60px rgba(30, 34, 38, 0.12);
    --sh-hover: 0 18px 40px rgba(30, 34, 38, 0.14);
    --sh-on-emphasis: 0 2px 12px rgba(0, 0, 0, 0.18); /* 色面の上のカード */

    /* ---------- 動き ---------- */
    --ease:      cubic-bezier(0.2, 0.6, 0.2, 1);
    --ease-wipe: cubic-bezier(0.7, 0, 0.2, 1);
    --dur:       180ms;
    --dur-md:    300ms;
    --dur-slow:  800ms;

    /* ---------- アイコン ---------- */
    --icon-sm:     1rem;
    --icon-md:     1.25rem;
    --icon-lg:     1.5rem;
    --icon-stroke: 1.75;
    --icon-btn:    2.5rem;  /* ボタン内の丸い矢印 */
    --tap:         2.75rem; /* 押せる大きさの最小（44px） */

    /* 矢印（mask用：色は文字色に追従） */
    --icon-arrow-right: 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%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    /* 矢印（背景画像用：濃い色で固定。シルバーの丸の上に置く） */
    --icon-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2226' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    /* チェック（mask用。エディタのリストブロックで、HTMLにSVGを書かずに出す） */
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E");

    /* 重なり順 */
    --z-pagetop: 90;
    --z-header:  100;
    --z-nav:     110;
    --z-burger:  120;
  }

  @media (max-width: 767px) {
    :root {
      --header-h: 64px;
    }
  }
}