/**
 * ==========================================================================
 * デザイントークン（CSS変数）- 統一版
 * 第三者評価アンケートシステム
 * ==========================================================================
 *
 * 2025-01-13 統一ルール適用
 * - 事業所管理者プロトタイプをベースに統一
 * - サイドバー幅280px、カード角丸12px、ボタングラデーション等
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root {
    /* ==========================================================================
     * カラー - プライマリ（テーマで上書き可能）
     * ========================================================================== */
    --primary: #3498db;
    --primary-dark: #2980b9;
    --primary-light: #5dade2;
    --primary-pale: #e8f4fc;

    /* ==========================================================================
     * カラー - セカンダリ（サイドバー等）
     * ========================================================================== */
    --secondary: #2C3E50;
    --secondary-dark: #1a252f;
    --secondary-light: #34495e;

    /* ==========================================================================
     * カラー - ステータス
     * ========================================================================== */
    --success: #27ae60;
    --success-light: #e8f6e8;
    --success-dark: #219a52;
    --success-text: #155724;

    --warning: #f39c12;
    --warning-light: #fff3cd;
    --warning-dark: #e08e0b;
    --warning-text: #856404;

    --danger: #e74c3c;
    --danger-light: #fdeaea;
    --danger-dark: #c0392b;
    --danger-text: #721c24;

    --info: #3498db;
    --info-light: #e8f4fc;
    --info-text: #2980b9;

    /* ==========================================================================
     * カラー - ニュートラル
     * ========================================================================== */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #ffffff;

    --border: #e0e0e0;
    --border-light: #f0f0f0;

    --background: #f5f7fa;
    --card-bg: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-hover: #f5f5f5;

    /* ==========================================================================
     * シャドウ
     * ========================================================================== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px var(--primary-pale);

    /* ==========================================================================
     * フォント - 統一: Inter + Noto Sans JP
     * ========================================================================== */
    --font-family: 'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;

    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-26: 26px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height: 1.6;

    /* ==========================================================================
     * スペーシング
     * ========================================================================== */
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-36: 36px;
    --space-40: 40px;
    --space-48: 48px;
    --space-80: 80px;

    /* ==========================================================================
     * ボーダー半径 - 統一値
     * ========================================================================== */
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-full: 9999px;

    /* ==========================================================================
     * トランジション
     * ========================================================================== */
    --transition: all 0.2s ease;

    /* ==========================================================================
     * レイアウト - 統一値
     * ========================================================================== */
    --sidebar-width: 220px;
    --content-padding: 32px;
    --login-card-width: 400px;
    --login-card-padding: 36px;

    /* ==========================================================================
     * コンポーネントサイズ - 統一値
     * ========================================================================== */
    /* ボタン */
    --btn-height: 36px;
    --btn-height-sm: 30px;
    --btn-height-lg: 44px;
    --btn-padding-x: 16px;
    --btn-padding-x-sm: 12px;
    --btn-padding-x-lg: 24px;

    /* 入力欄 */
    --input-height: 38px;
    --input-height-sm: 32px;
    --input-padding-x: 12px;
    --input-padding-y: 8px;

    /* ==========================================================================
     * Z-index
     * ========================================================================== */
    --z-sidebar: 100;
    --z-modal: 1000;
    --z-toast: 2000;
}