/* ==========================================================================
   ブランシェグループ ポータルサイト — Design Tokens
   v1.0 / 2026-09-07 / LAMP株式会社
   ここに定義された値以外の色・寸法をコンポーネントで直書きしないこと。
   ========================================================================== */

:root {
  /* ---------- Brand color ----------------------------------------------
     3法人のロゴ（Illustratorマスター）から実測した正式値。
     現行サイトの #FF531A はロゴより明るく彩度が高いため、
     ロゴマスターに合わせて #EA5505 を正とする。               */
  --c-cosme:        #EA5505;   /* 株式会社コスメブランシェ */
  --c-cosme-deep:   #C34505;   /* hover / 濃色 */
  --c-cosme-tint:   #FDEFE6;   /* 面で使う極薄オレンジ */
  --c-medical:      #74A455;   /* メディカルブランシェ株式会社 */
  --c-medical-deep: #5C8742;
  --c-medical-tint: #EFF4EA;
  --c-aimba:        #E64196;   /* 一般社団法人 先端医療・統合医療ブリッジ協会 */
  --c-aimba-deep:   #C22C7B;
  --c-aimba-tint:   #FCEDF5;

  /* ---------- Neutral ---------------------------------------------------
     現行の #272727 / #FFF3EE を軸に、わずかに暖色へ寄せて紙の質感を出す。 */
  --c-ink:      #1F1B18;   /* 見出し・本文 */
  --c-ink-2:    #6B635C;   /* 補助テキスト */
  --c-ink-3:    #9A928B;   /* キャプション・非活性 */
  --c-line:     #E3DBD3;   /* ヘアライン */
  --c-line-2:   #F0EAE4;   /* 極薄ヘアライン */
  --c-paper:    #FAF7F4;   /* ベース背景 */
  --c-cream:    #FDF2EA;   /* 交互セクション背景（現行 #FFF3EE 継承） */
  --c-white:    #FFFFFF;

  /* ---------- Semantic --------------------------------------------------- */
  --c-bg:        var(--c-paper);
  --c-surface:   var(--c-white);
  --c-text:      var(--c-ink);
  --c-text-sub:  var(--c-ink-2);
  --c-accent:    var(--c-cosme);
  --c-on-dark:   #F4EFEA;

  /* ---------- Typography -------------------------------------------------
     EN display : Bodoni Moda … コスメブランシェのロゴがディドネ系のため合わせる
     JP display : Zen Old Mincho … 現行サイトから継承
     UI / 数字   : Outfit … 現行サイトから継承
     JP body    : Noto Sans JP … 現行サイトから継承                        */
  --f-display-en: "Bodoni Moda", "Times New Roman", serif;
  --f-display-jp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-ui:         "Outfit", "Helvetica Neue", Arial, sans-serif;
  --f-body:       "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  /* fluid type scale (375px 〜 1440px) */
  --fs-hero:  clamp(1.6875rem, 0.55rem + 4.667vw, 4.75rem);   /* 390px:27px → 1440px:76px */
  --fs-h1:    clamp(1.375rem, 0.771rem + 2.476vw, 3.00rem);   /* 390px:22px → 1440px:48px */
  --fs-h2:    clamp(1.125rem, 0.754rem + 1.524vw, 2.125rem);  /* 390px:18px → 1440px:34px */
  --fs-h3:    clamp(1.0625rem, 0.99rem + 0.30vw, 1.25rem);
  --fs-lead:  clamp(0.9375rem, 0.90rem + 0.17vw, 1.0625rem);
  --fs-body:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.75rem;
  --fs-num:   clamp(2rem, 1.4rem + 2.6vw, 3.5rem);   /* 01 / 02 …の大きな数字 */

  --lh-tight: 1.35;
  --lh-head:  1.55;
  --lh-body:  2.0;      /* 和文本文は行間を広く */
  --ls-jp:    0.04em;
  --ls-label: 0.22em;   /* ENラベルのトラッキング */

  /* ---------- Space (8px base) ------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 16px;  --s-4: 24px;
  --s-5: 32px;  --s-6: 40px;  --s-7: 56px;  --s-8: 72px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;
  --sec-y:   clamp(56px, 3.5rem + 4vw, 128px);   /* セクション上下 */
  --sec-y-l: clamp(72px, 4.5rem + 5vw, 160px);   /* 大きめセクション */

  /* ---------- Layout ----------------------------------------------------- */
  --w-max:   1200px;   /* 標準コンテナ */
  --w-wide:  1440px;   /* ワイドコンテナ */
  --w-text:  760px;    /* 読み物幅 */
  --gutter:  clamp(20px, 4vw, 56px);
  --header-h: 76px;
  --header-h-min: 60px;

  /* ---------- Radius / Border / Shadow -----------------------------------
     角丸はほぼ使わない（医療・製造の実直さ）。カードは直角＋ヘアライン。 */
  --r-0: 0px;
  --r-1: 2px;
  --r-pill: 999px;
  --bd: 1px solid var(--c-line);
  --sh-1: 0 1px 2px rgba(31,27,24,.04);
  --sh-2: 0 12px 40px -18px rgba(31,27,24,.28);
  --sh-3: 0 28px 70px -30px rgba(31,27,24,.38);

  /* ---------- Motion ------------------------------------------------------ */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast: .22s;
  --t-base: .45s;
  --t-slow: .9s;

  --z-header: 100;
  --z-menu:   200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t-base: .01ms; --t-slow: .01ms; }
}