/*
 * AWS SAP学習リソース - CSS変数定義ファイル
 * データ駆動アーキテクチャに基づき、すべてのスタイル値を一元管理
 *
 * このファイルを変更するだけで、全206ページの配色・サイズが変更可能
 */

:root {
    /* ========================================
       AWS Brand Colors (WCAG 2.1 AA準拠)
       ======================================== */

    /* メインカラー */
    --color-aws-dark: #232F3E;              /* AWS公式ダークグレー */
    --color-aws-orange: #dc7600;            /* アクセシブル版オレンジ (4.5:1以上) */
    --color-aws-orange-original: #FF9900;   /* AWS公式オレンジ (大きいテキスト専用) */
    --color-aws-orange-hover: #EC7211;      /* ホバー時のオレンジ */

    /* テキストカラー */
    --color-text-primary: #374151;          /* 主要テキスト (黒に近いグレー) */
    --color-text-secondary: #6B7280;        /* 副次テキスト (ミディアムグレー) */
    --color-text-tertiary: #6f7682;         /* 補助テキスト (ライトグレー) */
    --color-text-white: #FFFFFF;            /* 白テキスト */

    /* 背景カラー */
    --color-bg-light: #F9FAFB;              /* ライト背景 */
    --color-bg-white: #FFFFFF;              /* ホワイト背景 */
    --color-bg-dark: #1F2937;               /* ダーク背景 */
    --color-bg-gradient-start: #232F3E;     /* グラデーション開始色 */
    --color-bg-gradient-end: #374151;       /* グラデーション終了色 */

    /* UI要素カラー */
    --color-border: #909296;                /* ボーダー・区切り線 */
    --color-border-light: #E5E7EB;          /* ライトボーダー */
    --color-shadow: rgba(0, 0, 0, 0.1);     /* 影の基本色 */

    /* ステータスカラー */
    --color-success: #10B981;               /* 成功・完了 */
    --color-warning: #F59E0B;               /* 警告 */
    --color-error: #EF4444;                 /* エラー */
    --color-info: #3B82F6;                  /* 情報 */

    /* カテゴリ別カラー（将来的にdata.jsと連携） */
    --color-category-networking: #74b9ff;
    --color-category-security: #fd79a8;
    --color-category-compute: #fdcb6e;
    --color-category-content: #00b894;
    --color-category-development: #a29bfe;
    --color-category-storage: #55efc4;
    --color-category-migration: #fab1a0;
    --color-category-analytics: #81ecec;


    /* ========================================
       Spacing System (5px刻み)
       ======================================== */

    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-base: 20px;
    --spacing-lg: 25px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;
    --spacing-4xl: 80px;


    /* ========================================
       Typography (フォントサイズ)
       ======================================== */

    --font-size-xs: 0.75em;      /* 12px相当 */
    --font-size-sm: 0.85em;      /* 13.6px相当 */
    --font-size-base: 0.95em;    /* 15.2px相当 */
    --font-size-md: 1em;         /* 16px相当 */
    --font-size-lg: 1.2em;       /* 19.2px相当 */
    --font-size-xl: 1.5em;       /* 24px相当 */
    --font-size-2xl: 2em;        /* 32px相当 */
    --font-size-3xl: 2.5em;      /* 40px相当 */
    --font-size-4xl: 3em;        /* 48px相当 */

    /* Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Height */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;


    /* ========================================
       Border Radius (角丸)
       ======================================== */

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-base: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 50%;          /* 円形 */


    /* ========================================
       Box Shadows (影)
       ======================================== */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.3);

    /* 特殊な影 */
    --shadow-focus: 0 0 0 3px rgba(255, 153, 0, 0.3);     /* フォーカス時 */
    --shadow-orange: 0 4px 12px rgba(255, 153, 0, 0.4);   /* オレンジの影 */
    --shadow-orange-hover: 0 6px 20px rgba(255, 153, 0, 0.6);


    /* ========================================
       Z-Index Layers (重なり順序)
       ======================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-scroll-top: 1000;
    --z-progress-bar: 1001;
    --z-header: 1002;
    --z-modal: 2000;
    --z-tooltip: 3000;


    /* ========================================
       Transitions (アニメーション)
       ======================================== */

    --transition-fast: 0.15s ease;
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s ease;


    /* ========================================
       Layout Dimensions (レイアウト寸法)
       ======================================== */

    --header-height: 60px;           /* 固定ヘッダーの高さ */
    --container-max-width: 1200px;   /* コンテンツ最大幅 */
    --container-narrow-width: 1000px; /* 狭いコンテンツ幅 */
    --sidebar-width: 280px;          /* サイドバー幅 */


    /* ========================================
       Breakpoints (レスポンシブブレークポイント)
       ======================================== */

    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1280px;


    /* ========================================
       Material 3 Surface Tokens
       ======================================== */

    /* Surface hierarchy (warm neutral) */
    --m3-surface: #FAFAF9;
    --m3-surface-container: #F5F4F2;
    --m3-surface-container-high: #EFEEEC;
    --m3-surface-container-low: #FDFCFA;
    --m3-on-surface: #1C1B1F;
    --m3-on-surface-variant: #49454F;
    --m3-outline: #CAC4D0;
    --m3-outline-variant: #E7E0EC;

    /* M3-inspired radius */
    --radius-card: 16px;
    --radius-card-lg: 20px;
    --radius-container: 24px;
    --radius-input: 12px;
    --radius-badge: 8px;
    --radius-pill: 100px;

    /* M3-inspired shadows (subtle, layered) */
    --shadow-card: 0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08);
    --shadow-elevated: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-container: 0 1px 4px rgba(0,0,0,0.03);
}

/*
 * ダークモード対応（将来的な拡張用）
 * 現在は未使用だが、data.jsでテーマ切り替えを実装する際に活用可能
 */
@media (prefers-color-scheme: dark) {
    :root {
        /* ダークモード時の色調整（コメントアウト） */
        /* --color-text-primary: #E5E7EB; */
        /* --color-bg-light: #1F2937; */
        /* --color-bg-white: #374151; */
    }
}