:root {
  /* カラーシステム - エコロジー＆IoT */
  /* ベースカラー - 新しい青緑グラデーションに合わせて調整 */
  --color-primary: #22c55e; /* 鮮やかな緑 (Green 500) - 成長と環境保全 */
  --color-secondary: #3b82f6; /* 鮮やかな青 (Blue 500) - テクノロジーと革新 */
  --color-accent: #06b6d4; /* シアン (Cyan 500) - 清々しい水色 */

  /* テキストカラー */
  --color-text-light: #f7f9f9; /* クリアホワイト */
  --color-text-dark: #0f172a; /* より深い青味のダーク */

  /* リンクカラー */
  --color-link: #22c55e;
  --color-link-hover: #3b82f6;

  /* 背景カラー */
  --color-background-light: #ffffff;
  --color-background-dark: #1e293b; /* より現代的なダークブルー */

  /* 追加のヒーローセクション専用カラー */
  --color-hero-stat-value: #7ae7ff; /* 統計数値の明るい青 */
  --color-hero-title: #e8f5f2; /* ヒーロータイトル */
  --color-hero-title-highlight: #b5dbd4; /* ヒーロータイトル強調 */
  --color-hero-subtitle: #e0f0ec; /* ヒーローサブタイトル */
  --color-hero-subtitle-highlight: #a0efe5; /* ヒーローサブタイトル強調 */

  /* コンタクトセクション専用カラー */
  --color-contact-subtitle: #e9f5f3; /* コンタクトサブタイトル */

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

  /* その他のシステムカラー */
  --color-neutral-light: #f3f3f3; /* 明るいニュートラル */
  --color-neutral-medium: #e9f5f3; /* 中間のニュートラル */

  /* グラデーション - 新しい青緑テーマに統一 */
  /* メインのブランドグラデーション */
  --gradient-primary: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.9) 0%,
    rgba(59, 130, 246, 0.9) 100%
  );

  /* セクション背景用グラデーション */
  --gradient-section-bg: linear-gradient(
    to right,
    var(--color-neutral-light),
    var(--color-neutral-medium),
    var(--color-neutral-light)
  );

  /* オプション2: エネルギッシュなサンセット風 */
  --gradient-sunset: linear-gradient(
    135deg,
    #22c55e 0%,
    #06b6d4 50%,
    #3b82f6 100%
  );

  /* オプション3: 未来的なテック風 */
  --gradient-tech: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);

  /* オプション4: 自然の成長を表現 */
  --gradient-nature: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);

  /* オプション5: 革新的なバイブラント */
  --gradient-vibrant: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);

  --gradient-eco-tech: linear-gradient(
    to right,
    #22c55e,
    #3b82f6
  ); /* 環境とテクノロジーの融合 - 新テーマ */
  --gradient-sunrise: linear-gradient(
    to top,
    #06b6d4,
    #3b82f6
  ); /* 爽やかな青のグラデーション */

  /* アースカラーアクセント - 新しいテーマに調和する色に更新 */
  --color-earth-brown: #a3a3a3; /* ニュートラルグレー */
  --color-sky-blue: #3b82f6; /* 新しいセカンダリカラーと同じ */
  --color-forest-green: #16a34a; /* より深い緑 */
  --color-sunset-orange: #f97316; /* オレンジのアクセント */

  /* ステータスカラー */
  --color-success: #22c55e; /* 成功は新しいプライマリカラーと同色 */
  --color-warning: #f59e0b; /* 警告は黄色系 */
  --color-error: #ef4444; /* エラーは赤色 */
  --color-info: #06b6d4; /* 情報は新しいアクセントカラーと同色 */

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

  --color-secondary-alpha-10: rgba(59, 130, 246, 0.1); /* 10%透明度 */
  --color-secondary-alpha-15: rgba(59, 130, 246, 0.15); /* 15%透明度 */
  --color-secondary-alpha-70: rgba(59, 130, 246, 0.7); /* 70%透明度 */
  --color-secondary-alpha-80: rgba(59, 130, 246, 0.8); /* 80%透明度 */

  --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); /* フォーム背景 */
}