/* ============================================
   CSS Variables - デザイントークン
   ============================================ */

:root {
  /* === Colors ===
     カラーパレット:
     - #011142 : 最深紺（ダーク背景・テキスト）
     - #011C6B : メインカラー（ブランド基調）
     - #01258F : やや明るい紺（ホバー・グラデ中間）
     - #0231BD : 明るめ紺（リンク・サブアクション）
     - #023BE6 : 最明（ハイライト・グラデ終点）
     - #A8C5E0 : アクセント（アイスブルー：テクノロジー・革新・クリーン）
  */
  --color-navy-darkest: #011142;
  --color-navy-deep:    #011C6B;
  --color-navy-mid:     #01258F;
  --color-navy:         #0231BD;
  --color-navy-bright:  #023BE6;

  --color-primary:      #011C6B;
  --color-primary-dark: #011142;
  --color-primary-light:#01258F;
  --color-accent:       #A8C5E0;        /* アイスブルー：テクノロジー・革新・クリーン */
  --color-accent-soft:  #C4D8EC;        /* ライトアイスブルー：ホバー・グラデ起点 */
  --color-accent-deep:  #7BA3CC;        /* ディープアイスブルー：強調・ボーダー */

  --color-text: #0a1024;
  --color-text-sub: #4a5168;
  --color-text-muted: #8a90a4;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f7fb;
  --color-bg-dark: #011142;
  --color-border: #e1e4ed;
  --color-white: #ffffff;
  --color-black: #000000;

  /* === Typography === */
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-en: 'Raleway', 'Helvetica Neue', Arial, sans-serif;

  /* Font sizes */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 2rem;       /* 32px */
  --fs-3xl: 2.5rem;     /* 40px */
  --fs-4xl: 3.5rem;     /* 56px */
  --fs-5xl: 4.5rem;     /* 72px */

  /* === Layout === */
  --container-base: 1440px;
  --container-narrow: 1140px;
  --container-text: 840px;

  /* Breakpoints (参考値、メディアクエリで使用) */
  --bp-mobile: 540px;
  --bp-tablet: 840px;
  --bp-small: 1140px;

  /* === Spacing === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;

  /* === Header === */
  --header-height: 80px;
  --header-height-sp: 64px;

  /* === Effects === */
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 2px 8px rgba(10, 24, 56, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 24, 56, 0.08);
  --shadow-lg: 0 16px 48px rgba(10, 24, 56, 0.12);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* === Z-index === */
  --z-base: 1;
  --z-header: 100;
  --z-modal: 1000;
  --z-loader: 9999;
}