@charset "UTF-8";
/* ==========================================================================
   variables.css — デザイントークン定義（CSS カスタムプロパティ）
   --------------------------------------------------------------------------
   このファイルが配色の唯一の定義元。
   配色を差し替えるときは、このファイルの値だけを書き換える。
   他の CSS に色の生の値を書いてはならない。
   ========================================================================== */

:root{
  /* === ブランド・アクセント =============================================== */
  --brand-green:      #0AEB82;  /* 主要CTA。1画面に1〜2箇所まで */
  --brand-green-dark: #046741;  /* 明色面上のリンク・緑テキスト */
  --brand-green-mid:  #079F5D;  /* eyebrow、セクション番号 */
  --brand-green-soft: #CAF6E2;  /* バッジ背景、アイコン枠線 */
  --teal-deep:        #001E2B;  /* ヘッダー帯・ページヘッド・フッター */
  --teal:             #023430;  /* 予備 */
  --teal-mid:         #13313F;  /* 暗色面上に重ねるカード */
  --accent-purple:    #8C4FF7;  /* 分類タグ用に予約（未使用） */
  --accent-orange:    #E0A03D;  /* 分類タグ用に予約（未使用） */

  /* === サーフェス ========================================================= */
  --canvas:          #FFFFFF;
  --canvas-dark:     #001E2B;
  --surface:         #F7FAF9;
  --surface-soft:    #EEF3F1;
  --surface-feature: #E3FCF4;
  --hairline:        #E4EAE8;
  --hairline-soft:   #EEF2F0;
  --hairline-strong: #C5CCCA;
  --hairline-dark:   rgba(255,255,255,.18);  /* 暗色面上の罫線 */
  /* 半透明の面。ヘッダーは背後が透けるため canvas の半透明版を使う */
  --canvas-translucent: rgba(255,255,255,.92);
  --overlay-light:      rgba(255,255,255,.08);  /* 暗色面上のホバー */

  /* === テキスト =========================================================== */
  --ink:           #001E2B;
  --charcoal:      #1C2D38;
  --slate:         #4C5A62;
  --steel:         #7A878D;
  --stone:         #94A0A5;  /* 装飾のみ。意味のあるテキストに使わない */
  --on-dark:       #FFFFFF;
  --on-dark-muted: rgba(255,255,255,.70);
  --on-dark-faint: rgba(255,255,255,.45);
  --on-primary:    #001E2B;

  /* === 半透明色の成分 =====================================================
     影とグラデーションも配色変更の対象。色成分を独立させておく。          */
  --shadow-rgb:      0, 30, 43;    /* --ink の RGB 成分 */
  --brand-green-rgb: 10, 235, 130;  /* --brand-green の RGB 成分 */

  /* === 影 ================================================================= */
  --e1: 0 1px 2px 0 rgba(var(--shadow-rgb), .04);
  --e2: 0 4px 12px 0 rgba(var(--shadow-rgb), .08);
  --e3: 0 12px 24px -4px rgba(var(--shadow-rgb), .12);
  --e4: 0 16px 48px -8px rgba(var(--shadow-rgb), .16);

  /* === 装飾グロー（紺の面の右上） ========================================= */
  --glow-brand: radial-gradient(circle, rgba(var(--brand-green-rgb), .16), transparent 62%);

  /* === 角丸 =============================================================== */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-xxl: 24px;
  --r-full: 9999px;

  /* === 書体 =============================================================== */
  --sans: 'Outfit','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'Source Code Pro','SF Mono',Menlo,Consolas,monospace;

  /* === 余白（4px 基本単位） =============================================== */
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-56: 56px;
  --sp-72: 72px;

  /* === レイアウト ========================================================= */
  --container:        1280px;
  --container-narrow:  800px;  /* 散文が主体のページ（挨拶・概要など） */
  --gutter:        clamp(24px, 5vw, 56px);
  --prose-width:   42em;   /* 和文の段落幅の上限 */
  --header-height: 68px;

  /* === 動き =============================================================== */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --dur:  .15s;
}