:root {
  /* カラーシステム - エコロジー＆IoT */
  /* ベースカラー - 彩度を落とした Deep Forest & Steel スキーム */
  --color-primary: #2f4f4f; /* ダークスレートグレー (Dark Slate Gray) - 深い森の緑 */
  --color-secondary: #4682b4; /* スチールブルー (Steel Blue) - 知的なテクノロジー */
  --color-accent: #8fbc8f; /* ダークシーグリーン (Dark Sea Green) - 柔らかい発光・成長 */

  /* テキストカラー */
  --color-text-light: #e0e7e7; /* わずかに青灰みのあるホワイト */
  --color-text-dark: #1a2421; /* 極めて深い緑黒 */

  /* リンクカラー */
  --color-link: #4682b4;
  --color-link-hover: #8fbc8f;

  /* 背景カラー */
  --color-background-light: #f4f7f7; /* 非常に明るい灰緑白 */
  --color-background-dark: #2c3e50; /* 深い紺灰 */

  /* 追加のヒーローセクション専用カラー */
  --color-hero-stat-value: #a3e4d7; /* 統計数値の落ち着いたミント */
  --color-hero-title: #e0f0ef; /* ヒーロータイトル */
  --color-hero-title-highlight: #9cbdb6; /* ヒーロータイトル強調（彩度低） */
  --color-hero-subtitle: #cededb; /* ヒーローサブタイトル */
  --color-hero-subtitle-highlight: #84ada3; /* ヒーローサブタイトル強調 */
  --color-hero-glow: rgba(143, 188, 143, 0.4); /* アクセント色の発光効果 */

  /* コンタクトセクション専用カラー */
  --color-contact-subtitle: #cededb;

  /* プライバシー同意セクション専用カラー */
  --color-privacy-label: #cededb;

  /* その他のシステムカラー */
  --color-neutral-light: #f3f3f3;
  --color-neutral-medium: #e9f0ef;

  /* グラデーション */
  --gradient-primary: linear-gradient(
    135deg,
    rgba(47, 79, 79, 0.9) 0%,
    rgba(70, 130, 180, 0.9) 100%
  );

  --gradient-section-bg: linear-gradient(
    to right,
    var(--color-neutral-light),
    var(--color-neutral-medium),
    var(--color-neutral-light)
  );

  --gradient-eco-tech: linear-gradient(
    to right,
    var(--color-primary),
    var(--color-secondary)
  );

  --gradient-greeting: linear-gradient(135deg, #2c3e50, #2f4f4f);

  /* 透明度付きテーマカラー */
  --color-primary-alpha-10: rgba(47, 79, 79, 0.1);
  --color-primary-alpha-15: rgba(47, 79, 79, 0.15);
  --color-primary-alpha-70: rgba(47, 79, 79, 0.7);
  --color-primary-alpha-80: rgba(47, 79, 79, 0.8);

  --color-secondary-alpha-10: rgba(70, 130, 180, 0.1);
  --color-secondary-alpha-15: rgba(70, 130, 180, 0.15);
  --color-secondary-alpha-70: rgba(70, 130, 180, 0.7);
  --color-secondary-alpha-80: rgba(70, 130, 180, 0.8);

  --color-background-dark-alpha-80: rgba(
    30,
    41,
    59,
    0.8
  ); /* ダークカラー80%透明度 */

  /* タイポグラフィ */
  --font-family-base: 'Montserrat', sans-serif;
  --font-family-japanese: 'Noto Sans JP', sans-serif;
  --font-family-data: 'Roboto Mono', monospace; /* データ表示用等幅フォント */
  --font-size-hero: 3.5rem;
  --font-size-h1: 2.5rem;
  --font-size-h2: 1.8rem;
  --font-size-h3: 1.4rem;
  --font-size-base: 1.125rem; /* 1remから1.125remに増加 */
  --font-size-small: 0.9375rem; /* 0.875remから0.9375remに増加 */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-normal: 500;
  --font-weight-data: 500; /* データ表示用 */
  --line-height-tight: 1.2;
  --line-height-base: 1.6; /* 読みやすさとエアリー感の両立 */
  --line-height-loose: 1.8;
  --max-line-width: 40ch; /* 日本語の場合の最大行幅 */

  /* スペーシング */
  --spacing-xxs: 0.375rem; /* 6px */
  --spacing-xs: 0.75rem; /* 12px */
  --spacing-sm: 1.25rem; /* 20px */
  --spacing-md: 2.5rem; /* 40px */
  --spacing-lg: 5rem; /* 80px */
  --spacing-xl: 7.5rem; /* 120px */
  --spacing-xxl: 10rem; /* 160px */

  /* セクション余白 */
  --section-padding-desktop: var(--spacing-xl) 0;
  --section-padding-mobile: var(--spacing-lg) 0;
  --section-margin-desktop: var(--spacing-xxl) 0;
  --section-margin-mobile: var(--spacing-xl) 0;

  /* ボーダー */
  --border-radius-sm: 6px; /* よりソフトな丸み */
  --border-radius-md: 12px;
  --border-radius-lg: 18px;
  --border-radius-xl: 28px;
  --border-radius-pill: 9999px;
  --border-width: 2px; /* より太いボーダー */
  --border-width-thin: 1px;
  --border-width-medium: 3px;
  --border-gradient: 5px solid transparent; /* グラデーションボーダー用 */
  --border-color-light: rgba(34, 197, 94, 0.1);
  --border-color-medium: rgba(34, 197, 94, 0.2);

  /* シャドウ - 新しいプライマリカラーに合わせて調整 */
  --shadow-card: 0 8px 25px rgba(15, 23, 42, 0.08); /* 新しいダークカラーベース */
  --shadow-button: 0 4px 10px rgba(34, 197, 94, 0.15);
  --shadow-hover: 0 12px 30px rgba(34, 197, 94, 0.12);
  --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.25);

  /* グラスモーフィズム用 */
  --glass-background: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-blur: 15px;

  /* トランジション */
  --transition-fast: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 自然な動きを表現 */
  --transition-slow: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* よりゆったりした動き */

  /* アニメーション */
  --animation-duration-short: 0.4s;
  --animation-duration-medium: 0.6s;
  --animation-duration-long: 0.9s;
  --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* コンテナ */
  --container-max-width: 900px;
  --container-padding: 4%;
  --container-padding-mobile: 15px;

  /* グリッド */
  --grid-columns: 12;
  --grid-gutter-desktop: 30px;
  --grid-gutter-mobile: 15px;

  /* ブレイクポイント */
  --breakpoint-mobile: 576px;
  --breakpoint-tablet: 992px;
  --breakpoint-desktop: 1200px;
  --breakpoint-large: 1400px; /* データダッシュボード向け */

  /* UI要素サイズ */
  --button-padding-large: 16px 32px;
  --button-padding-medium: 12px 24px;
  --button-padding-small: 8px 16px;
  --input-height: 48px; /* より大きなフォーム要素 */
  --touch-target-size: 44px;

  /* Z-index階層 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-tooltip: 1060;

  /* ヒーローセクション専用グラデーション */
  --gradient-hero-overlay: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.6),
    rgba(59, 130, 246, 0.65)
  ); /* 新しいテーマカラーでのオーバーレイ - 明度を上げて調整 */

  --gradient-hero-background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.5),
    rgba(34, 197, 94, 0.6),
    rgba(59, 130, 246, 0.5)
  ); /* ヒーロー背景用グラデーション - コンタクトセクションと同程度の明度に調整 */

  /* 会社概要セクション専用グラデーション */
  --gradient-org-info-overlay: linear-gradient(
    rgba(34, 197, 94, 0.75),
    rgba(30, 41, 59, 0.85)
  ); /* 会社概要セクションのオーバーレイ */

  /* コンタクトセクション専用グラデーション */
  --gradient-contact-overlay: linear-gradient(
    rgba(34, 197, 94, 0.7),
    rgba(59, 130, 246, 0.8)
  ); /* コンタクトセクションのオーバーレイ - 鮮やかな緑から青へ */

  /* フォーム背景用グラデーション */
  --gradient-form-background: rgba(30, 41, 59, 0.4); /* フォーム背景 */
}