/* ========================================
   定数定義ファイル (const.css)
======================================== */

:root {
  /* ==================== カラー定義 ==================== */

  /* 主要カラー */
  --color-primary-dark: #264273;
  --color-primary: #14456e;
  --color-primary-light: #1e3b6e;
  --color-primary-lighter: #133c85;
  --color-accent: #1db6e2;
  --color-accent-dark: #006ac3;
  --color-accent-light: #4ac5e8;

  /* 青系 */
  --color-blue-lightest: #f6faff;
  --color-blue-lighter-2: #d0e9ff;
  --color-blue-lighter-3: #d7e6f8;
  --color-blue-lighter-4: #c1edff;
  --color-blue-lighter-5: #c8e0ee;
  --color-blue-lighter-6: #daf7ff;
  --color-blue-lighter-7: #e5f4fc;
  --color-blue-lighter: #c3e7f6;
  --color-blue-light: #e1f5fd;
  --color-blue-bg-hex: #e4f2ff;
  --color-blue-medium: #6db2d9;
  --color-blue-medium-2: #117fa4;
  --color-blue-bright: #2064de;
  --color-blue-bright-2: #00a2d1;
  --color-blue-dark: #185384;
  --color-blue-dark-2: #39699b;
  --color-blue-dark-3: #295096;
  --color-blue-dark-4: #206eaf;
  --color-blue-dark-5: #1950b2;
  --color-blue-dark-6: #1f4b86;
  --color-blue-dark-7: #1e3a6d;
  --color-blue-dark-8: #1d3b6e;
  --color-blue-dark-9: #2d569f;
  --color-navy: #293c67;
  --color-navy-dark: #253a6a;
  --color-navy-darker: #1b2538;

  /* モノトーン */
  --color-white: #fff;
  --color-black: #000;
  --color-gray-lightest: #f5f5f5;
  --color-gray-lighter: #f0f0f0;
  --color-gray-lighter-2: #f2f2f2;
  --color-gray-light: #f7f7f7;
  --color-gray-light-2: #e3e3e3;
  --color-gray-light-3: #e5e4e4;
  --color-gray: #e6e6e6;
  --color-gray-border: #ccc;
  --color-gray-medium: #bfbfbf;
  --color-gray-medium-2: #bdbbba;
  --color-gray-medium-3: #b4b3b3;
  --color-gray-dark: #888888;
  --color-gray-dark-2: #666;
  --color-gray-dark-3: #a3a3a3;
  --color-gray-darker: #333;

  /* 黄色系 */
  --color-yellow-lightest: #fffaed;
  --color-yellow-pale: #faf6d5;
  --color-yellow-pale-2: #e6e2bc;
  --color-yellow-pale-3: #ff9;
  --color-yellow-highlight: #ff6;
  --color-yellow-light: #fff044;
  --color-yellow: #ffec15;
  --color-yellow-bright: #e3d02a;
  --color-yellow-dark: #c2a100;

  /* 緑系 */
  --color-green-bright: #22d124;
  --color-green-bright-2: #01d401;
  --color-green: #00c600;
  --color-green-dark: #408847;

  /* オレンジ系 */
  --color-orange-lightest: #ffead1;
  --color-orange-light: #fff7f0;
  --color-orange-medium: #ffbe71;
  --color-orange: #ff8a00;
  --color-orange-medium-2: #ef873c;
  --color-orange-dark: #e27029;

  /* 赤系 */
  --color-red-bright: #ff5757;
  --color-red: #d70000;
  --color-red-transparent: rgba(208, 22, 19, 0.6);

  /* ピンク系 */
  --color-pink-lightest: #fff2fb;
  --color-pink-light: #f8bbd5;

  /* シアン系 */
  --color-cyan-lightest: #dcfeff;
  --color-cyan: #88d7d9;

  /* 背景色 */
  --color-blue-bg: rgba(228, 242, 255, 1);
  --color-blue-bg-light: rgba(228, 242, 255, 0.3);

  /* 影・透明度 */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-light-2: rgba(0, 0, 0, 0.18);
  --shadow-medium: rgba(0, 0, 0, 0.25);
  --shadow-medium-2: rgba(0, 0, 0, 0.3);
  --shadow-dark: rgba(0, 0, 0, 0.4);

  /* ==================== フォントサイズ ==================== */
  --font-size-xxs: 1rem; /* 10px */
  --font-size-xs: 1.2rem; /* 12px */
  --font-size-sm: 1.3rem; /* 13px */
  --font-size-base: 1.5rem; /* 15px */
  --font-size-16: 1.6rem; /* 16px */
  --font-size-md: 1.7rem; /* 17px */
  --font-size-lg: 1.8rem; /* 18px */
  --font-size-xl: 2rem; /* 20px */
  --font-size-2xl: 2.2rem; /* 22px */
  --font-size-25: 2.5rem; /* 25px */
  --font-size-3xl: 2.8rem; /* 28px */
  --font-size-30: 3rem; /* 30px */
  --font-size-33: 3.3rem; /* 33px */
  --font-size-35: 3.5rem; /* 35px */
  --font-size-4xl: 3.6rem; /* 36px */
  --font-size-40: 4rem; /* 40px */
  --font-size-45: 4.5rem; /* 45px */
  --font-size-60: 6rem; /* 60px */
  --font-size-70: 7rem; /* 70px */
  --font-size-80: 8rem; /* 80px */

  /* ==================== スペーシング ==================== */
  /* 4の倍数で統一 */
  --spacing-0: 0;
  --spacing-1: 0.4rem; /* 4px */
  --spacing-2: 0.8rem; /* 8px */
  --spacing-3: 1.2rem; /* 12px */
  --spacing-4: 1.6rem; /* 16px */
  --spacing-5: 2rem; /* 20px */
  --spacing-6: 2.4rem; /* 24px */
  --spacing-7: 2.8rem; /* 28px */
  --spacing-8: 3.2rem; /* 32px */
  --spacing-10: 4rem; /* 40px */
  --spacing-11: 4.4rem; /* 44px */
  --spacing-12: 4.8rem; /* 48px */
  --spacing-13: 5.2rem; /* 52px */
  --spacing-14: 5.6rem; /* 56px */
  --spacing-15: 6rem; /* 60px */
  --spacing-16: 6.4rem; /* 64px */
  --spacing-18: 7.2rem; /* 72px */
  --spacing-20: 8rem; /* 80px */
  --spacing-22: 8.8rem; /* 88px */
  --spacing-24: 9.6rem; /* 96px */
  --spacing-25: 10rem; /* 100px */
  --spacing-28: 11.2rem; /* 112px */
  --spacing-30: 12rem; /* 120px */
  --spacing-32: 13rem; /* 130px */
  --spacing-37: 15rem; /* 150px */

  /* ==================== 後方互換性のためのエイリアス ==================== */
  --primary-blue: var(--color-primary);
  --primary-deep-blue: var(--color-primary-lighter);
  --secondary-blue: var(--color-accent);
  --free-trial: var(--color-green);
  --official-line: var(--color-primary-light);
  --sky-blue: var(--color-blue-bg);
  --junior-primary-color: var(--color-orange);
  --light-orange: var(--color-orange-light);
}