/**
 * SATELLITE AI アカデミー - デザイントークン
 *
 * 基盤: satellite-os のモノトーン
 * アクセント: 青系 #3B82F6 (Tailwind blue-500)
 *
 * 命名規約: --sa-{category}-{name}-{variant}
 *   sa = SATELLITE AI Academy
 */

:root {
    /* ========================================
       Color: Background / Surface
       ======================================== */
    --sa-color-bg:            #EFEDED;  /* サイト全体の薄グレー */
    --sa-color-content-bg:    #F8F8F7;  /* メインコンテンツエリア */
    --sa-color-surface:       #FFFFFF;  /* カード / ヘッダー */
    --sa-color-surface-hover: #F9FAFB;
    --sa-color-surface-active:#F3F4F6;

    /* ========================================
       Color: Text
       ======================================== */
    --sa-color-text:           #333333;  /* 本文 / CTA bg */
    --sa-color-text-hover:     #555555;
    --sa-color-text-secondary: #6B7280;  /* 補足テキスト */
    --sa-color-text-muted:     #C6C6C6;  /* プレースホルダー */
    --sa-color-text-inverse:   #FFFFFF;  /* 暗背景上 */

    /* ========================================
       Color: Border
       ======================================== */
    --sa-color-border:         #E5E7EB;
    --sa-color-border-strong:  #D1D5DB;

    /* ========================================
       Color: Accent (Blue)
       ======================================== */
    --sa-color-accent:         #3B82F6;  /* 進捗バー / リンク / アクティブ */
    --sa-color-accent-hover:   #2563EB;
    --sa-color-accent-light:   #DBEAFE;  /* 進捗バー背景 / 軽いバッジ */
    --sa-color-accent-dark:    #1D4ED8;

    /* ========================================
       Color: Semantic
       ======================================== */
    --sa-color-success:        #10B981;  /* 完了マーク */
    --sa-color-success-light:  #D1FAE5;
    --sa-color-warning:        #F59E0B;  /* 重要なお知らせ */
    --sa-color-warning-light:  #FEF3C7;
    --sa-color-danger:         #EF4444;  /* エラー / ログアウト */
    --sa-color-danger-light:   #FEE2E2;

    /* ========================================
       Typography
       ======================================== */
    --sa-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
                    Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sa-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
                    Consolas, 'Courier New', monospace;

    --sa-font-size-xs:   12px;
    --sa-font-size-sm:   14px;
    --sa-font-size-base: 16px;
    --sa-font-size-lg:   18px;
    --sa-font-size-xl:   20px;
    --sa-font-size-2xl:  24px;
    --sa-font-size-3xl:  30px;
    --sa-font-size-4xl:  36px;

    --sa-line-height-tight:   1.25;
    --sa-line-height-base:    1.5;
    --sa-line-height-relaxed: 1.75;

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

    /* ========================================
       Spacing (8pxベース)
       ======================================== */
    --sa-space-1:   4px;
    --sa-space-2:   8px;
    --sa-space-3:  12px;
    --sa-space-4:  16px;
    --sa-space-5:  20px;
    --sa-space-6:  24px;
    --sa-space-8:  32px;
    --sa-space-10: 40px;
    --sa-space-12: 48px;
    --sa-space-16: 64px;
    --sa-space-20: 80px;

    /* ========================================
       Radius
       ======================================== */
    --sa-radius-sm:   4px;
    --sa-radius-md:   8px;
    --sa-radius-lg:  12px;
    --sa-radius-xl:  16px;
    --sa-radius-2xl: 24px;
    --sa-radius-full: 9999px;

    /* ========================================
       Shadow
       ======================================== */
    --sa-shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sa-shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.1),
                     0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --sa-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1),
                     0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sa-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1),
                     0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sa-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1),
                     0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --sa-shadow-focus: 0 0 0 3px var(--sa-color-accent-light);

    /* ========================================
       Transition
       ======================================== */
    --sa-transition-fast: 0.15s ease;
    --sa-transition-base: 0.2s ease;
    --sa-transition-slow: 0.4s ease;

    /* ========================================
       Layout
       ======================================== */
    --sa-container-max-width: 1200px;
    --sa-content-max-width:    800px;
    --sa-narrow-max-width:     480px;

    /* ========================================
       Z-index scale
       ======================================== */
    --sa-z-dropdown: 100;
    --sa-z-sticky:   200;
    --sa-z-modal:    1000;
    --sa-z-tooltip:  1100;
}