/**
 * Hermès風デザイン - CSS変数定義
 * ネオプラズマ株式会社専用
 *
 * 用途: 全体で使用するデザイントークン（カラー、タイポグラフィ、スペーシング等）
 * 参照: docs/specs/hermes_ui_migration_spec.md
 */

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

  /* プライマリカラー（ベージュ系） */
  --np-color-bg-primary: #fcf7f1;
  --np-color-bg-primary-transparent: rgba(252, 247, 241, 0.73);
  --np-color-bg-secondary: #fffcf7;
  --np-color-bg-white: #ffffff;
  --np-color-bg-alternate: #f9f5f0;

  /* テキストカラー */
  --np-color-text-primary: #444444;
  --np-color-text-secondary: #696969;
  --np-color-text-dark: #000000;
  --np-color-text-light: #999999;
  --np-color-text-white: #ffffff;

  /* ボーダーカラー */
  --np-color-border-light: #f6f1eb;
  --np-color-border-medium: #e2d8ce;
  --np-color-border-dark: #cccccc;

  /* アクセントカラー */
  --np-color-accent-red: #ff6b6b;
  --np-color-accent-orange: #fd780f; /* ネオプラズマオレンジ */
  --np-color-accent-green: #4caf50;

  /* 状態カラー */
  --np-color-success: #4caf50;
  --np-color-warning: #ff9800;
  --np-color-error: #f44336;
  --np-color-info: #2196f3;

  /* オーバーレイカラー */
  --np-color-overlay-dark: rgba(0, 0, 0, 0.5);
  --np-color-overlay-light: rgba(255, 255, 255, 0.9);

  /* ============================================
     タイポグラフィ
     ============================================ */

  /* フォントファミリー */
  --np-font-family-primary: 'Helvetica Neue', 'Arial', 'Hiragino Sans',
                            'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --np-font-family-secondary: 'Georgia', 'Times New Roman', serif;
  --np-font-family-code: 'Courier New', 'Consolas', monospace;

  /* フォントサイズ */
  --np-font-size-xs: 0.75rem;      /* 12px */
  --np-font-size-sm: 0.875rem;     /* 14px */
  --np-font-size-base: 1rem;       /* 16px */
  --np-font-size-md: 1.125rem;     /* 18px */
  --np-font-size-lg: 1.25rem;      /* 20px */
  --np-font-size-xl: 1.5rem;       /* 24px */
  --np-font-size-2xl: 2rem;        /* 32px */
  --np-font-size-3xl: 3rem;        /* 48px */
  --np-font-size-4xl: 4rem;        /* 64px */

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

  /* 行間 */
  --np-line-height-tight: 1.2;
  --np-line-height-normal: 1.5;
  --np-line-height-relaxed: 1.75;
  --np-line-height-loose: 2;

  /* レタースペーシング */
  --np-letter-spacing-tight: -0.02em;
  --np-letter-spacing-normal: 0;
  --np-letter-spacing-wide: 0.03em;
  --np-letter-spacing-wider: 0.05em;
  --np-letter-spacing-widest: 0.1em;

  /* ============================================
     スペーシング
     ============================================ */

  /* マージン・パディング */
  --np-spacing-xs: 0.25rem;    /* 4px */
  --np-spacing-sm: 0.5rem;     /* 8px */
  --np-spacing-base: 1rem;     /* 16px */
  --np-spacing-md: 1.5rem;     /* 24px */
  --np-spacing-lg: 2rem;       /* 32px */
  --np-spacing-xl: 3rem;       /* 48px */
  --np-spacing-2xl: 4rem;      /* 64px */
  --np-spacing-3xl: 6rem;      /* 96px */

  /* レスポンシブマージン */
  --np-margin-mobile: 15px;
  --np-margin-desktop: 24px;

  /* コンテンツ幅 */
  --np-container-max-width: 1920px;
  --np-content-max-width: 1440px;
  --np-content-narrow-width: 960px;

  /* ============================================
     レイアウト
     ============================================ */

  /* ヘッダー高さ */
  --np-header-height-mobile: 60px;
  --np-header-height-desktop: 80px;
  --np-header-menu-height: 60px;

  /* フッター高さ */
  --np-footer-height: auto;

  /* z-index階層 */
  --np-z-base: 1;
  --np-z-dropdown: 10;
  --np-z-sticky: 50;
  --np-z-header: 100;
  --np-z-menu: 101;
  --np-z-overlay: 500;
  --np-z-modal-backdrop: 1000;
  --np-z-tray: 2000;
  --np-z-modal: 2002;
  --np-z-notification: 3000;

  /* グリッド */
  --np-grid-gap-mobile: 16px;
  --np-grid-gap-desktop: 24px;
  --np-grid-columns-mobile: 1;
  --np-grid-columns-tablet: 2;
  --np-grid-columns-desktop: 3;
  --np-grid-columns-wide: 4;

  /* ============================================
     ブレイクポイント（参考値：JSやメディアクエリで使用）
     ============================================ */

  --np-breakpoint-mobile: 767px;
  --np-breakpoint-tablet: 768px;
  --np-breakpoint-desktop: 1024px;
  --np-breakpoint-wide: 1920px;

  /* ============================================
     トランジション・アニメーション
     ============================================ */

  /* トランジション速度 */
  --np-transition-fast: 0.2s ease;
  --np-transition-normal: 0.3s ease;
  --np-transition-slow: 0.5s ease;

  /* イージング関数 */
  --np-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --np-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --np-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --np-ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);

  /* アニメーション時間 */
  --np-animation-duration-fast: 200ms;
  --np-animation-duration-normal: 300ms;
  --np-animation-duration-slow: 500ms;

  /* ============================================
     シャドウ
     ============================================ */

  --np-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --np-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);
  --np-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --np-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --np-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);

  /* ============================================
     ボーダー半径
     ============================================ */

  --np-radius-sm: 2px;
  --np-radius-base: 4px;
  --np-radius-md: 8px;
  --np-radius-lg: 12px;
  --np-radius-xl: 16px;
  --np-radius-round: 50%;
  --np-radius-pill: 9999px;

  /* ============================================
     その他
     ============================================ */

  /* フォーカスアウトライン */
  --np-focus-outline-color: var(--np-color-accent-orange);
  --np-focus-outline-width: 2px;
  --np-focus-outline-offset: 2px;

  /* 無効状態の透明度 */
  --np-opacity-disabled: 0.5;

  /* ホバー時の透明度 */
  --np-opacity-hover: 0.8;
}

/**
 * ダークモード対応（将来の拡張用）
 */
@media (prefers-color-scheme: dark) {
  :root {
    /* ダークモード時の変数定義（オプション） */
    /* 現時点では未実装 */
  }
}