/* CSS Variables - Modern Accessible Theme */

:root {
  /* カラーパレット */

  /* プライマリ＆アクセントカラー */
  --color-primary: #1E3A8A;
  --color-primary-hover: #1A2F69;
  --color-primary-light: #E0E7FF;
  --color-primary-dark: #162857;
  --color-accent: #10B981;
  --color-accent-hover: #0F9F6A;
  --color-accent-light: #D1FAE5;
  --color-secondary: #475569;
  --color-secondary-hover: #334155;
  --color-secondary-light: #E2E8F0;

  /* テキストカラー */
  --color-text-primary: #0F172A;
  --color-text-secondary: #334155;
  --color-text-muted: #64748B;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #1E3A8A;
  --color-text-link-hover: #0F2A67;

  /* 背景色 */
  --color-bg-primary: #F8FAFC;
  --color-bg-secondary: #EEF2F6;
  --color-bg-tertiary: #E2E8F0;
  --color-bg-surface: #FFFFFF;
  --color-bg-light: #FFFFFF;
  --color-bg-overlay: rgb(15 23 42 / 72%);

  /* ボーダーカラー */
  --color-border: #CBD5F5;
  --color-border-soft: #E2E8F0;
  --color-border-strong: #94A3B8;
  --color-border-focus: #1E3A8A;

  /* ステータスカラー */
  --color-success: #15803D;
  --color-success-hover: #166534;
  --color-success-light: #DCFCE7;
  --color-success-dark: #14532D;
  --color-warning: #F97316;
  --color-warning-hover: #EA580C;
  --color-warning-light: #FFF7ED;
  --color-warning-dark: #C2410C;
  --color-error: #B91C1C;
  --color-error-hover: #991B1B;
  --color-error-light: #FEE2E2;
  --color-error-dark: #7F1D1D;
  --color-info: #0EA5E9;
  --color-info-hover: #0284C7;
  --color-info-light: #E0F2FE;
  --color-info-dark: #0369A1;

  /* シャドウ - Atlassian Design System準拠 */
  --shadow-sm: 0 2px 6px rgb(15 23 42 / 8%);
  --shadow-md: 0 10px 20px rgb(15 23 42 / 10%);
  --shadow-lg: 0 24px 40px rgb(15 23 42 / 12%);
  --shadow-xl: 0 40px 80px rgb(15 23 42 / 15%);

  /* ボーダーラジアス - Atlassian Design System準拠 */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* スペーシング */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-xxxl: 4rem;

  /* フォントファミリー - Atlassian Design System準拠 */
  --font-family-primary: 'Noto Sans JP', 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Noto Sans JP', 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --font-family-mono: 'Fira Mono', 'SF Mono', menlo, consolas, 'Courier New', monospace;

  /* フォントサイズ */
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.75rem;
  --font-size-xxl: 2.25rem;
  --font-size-xxxl: 2.875rem;

  /* フォントウェイト */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ラインハイト */
  --line-height-tight: 1.25;
  --line-height-normal: 1.65;
  --line-height-loose: 1.9;

  /* レスポンシブブレークポイント */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1200px;
  --breakpoint-wide: 1440px;

  /* コンテナ幅 */
  --container-max-width: 1200px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1010;
  --z-fixed: 1020;
  --z-modal-backdrop: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
  --z-floating: 1015;

  /* トランジション */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
  --transition-slow: 0.4s ease-in-out;

  /* ヘッダー設定 */
  --header-height: 72px;
  --header-height-mobile: 64px;
  --header-bg-gradient: linear-gradient(135deg, rgb(224 231 255 / 85%), rgb(248 250 252 / 95%));
  --header-border-color: rgb(226 232 240 / 70%);

  /* フッター設定 */
  --footer-bg: var(--color-bg-secondary);

  /* ボタン設定 - Atlassian Design System準拠 */
  --button-height-sm: 2.25rem;
  --button-height-md: 2.75rem;
  --button-height-lg: 3.25rem;
  --button-padding-x: 1.125rem;
  --button-border-radius: var(--radius-full);

  /* カード設定 - Atlassian Design System準拠 */
  --card-padding: var(--spacing-lg);
  --card-border-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);

  /* フォーム設定 - Atlassian Design System準拠 */
  --input-height: 2.75rem;
  --input-padding-x: 0.75rem;
  --input-border-radius: var(--radius-md);
  --input-border-width: 2px;

  /* 難易度カラー（色覚配慮済み） - ADS準拠 */
  --difficulty-beginner: #10B981;
  --difficulty-intermediate: #F97316;
  --difficulty-advanced: #EF4444;

  /* タグカラー */
  --tag-bg: #E2E8F0;
  --tag-text: #475569;
  --tag-border: #CBD5E1;

  /* アニメーション設定 */
  --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-elastic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --animation-sharp: cubic-bezier(0.55, 0, 0.1, 1);

  /* ハンバーガーメニュー専用設定 */
  --hamburger-size: 44px;
  --hamburger-line-height: 3px;
  --hamburger-line-spacing: 6px;
  --menu-overlay-color: rgb(15 23 42 / 75%);
  --menu-slide-distance: 100vw;
  --ads-space-150: 12px;  /* 1.5 units */
  --ads-space-200: 16px;  /* 2 units */
  --ads-space-300: 24px;  /* 3 units */
  --ads-space-400: 32px;  /* 4 units */
  --ads-space-500: 40px;  /* 5 units */
  
  /* ADS Color トークン */
  --ads-color-primary: #0052CC;
  --ads-color-primary-hover: #0065FF;
  --ads-color-primary-pressed: #003884;
  --ads-color-secondary: #6B778C;
  --ads-color-secondary-hover: #8993A4;
  --ads-color-secondary-pressed: #505F79;
  --ads-color-neutral-0: #FFF;
  --ads-color-neutral-100: #F4F5F7;
  --ads-color-neutral-200: #EBECF0;
  --ads-color-neutral-300: #DFE1E6;
  --ads-color-neutral-500: #8993A4;
  --ads-color-neutral-800: #172B4D;
  --ads-color-success: #00875A;
  --ads-color-success-hover: #36B37E;
  
  /* ADS Shadow トークン */
  --ads-shadow-raised: 0px 1px 1px rgb(9 30 66 / 25%), 0px 0px 1px rgb(9 30 66 / 31%);
  --ads-shadow-overlay: 0px 4px 8px rgb(9 30 66 / 25%), 0px 0px 1px rgb(9 30 66 / 31%);
  
  /* ADS Border Radius トークン */
  --ads-border-radius-050: 2px;
  --ads-border-radius-100: 3px;
  --ads-border-radius-200: 6px;
  --ads-border-radius-circle: 50%;
}