/**
 * WP GFM Renderer - CSS Variables
 * 
 * Global CSS variables and Shiki theme integration
 * 
 * @package WpGfmRenderer
 * @since 1.0.0
 */

:root {

    /* === Shiki Code Block Variables === */
    --gfmr-code-font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    --gfmr-code-font-size: 14px;
    --gfmr-code-line-height: 1.5;
    --gfmr-code-padding: 16px;
    --gfmr-code-border-radius: 6px;
    
    /* === Shiki Color Protection Variables === */

    /* These variables are used to protect Shiki highlight colors and ensure consistency */
    
    /* Light Theme - Shiki GitHub Light */
    --gfmr-shiki-bg-light: #fff;
    --gfmr-shiki-border-light: #d0d7de;
    --gfmr-shiki-text-light: #1f2328;
    --gfmr-shiki-primary-light: #0366d6;
    --gfmr-shiki-comment-light: #6e7781;
    --gfmr-shiki-keyword-light: #cf222e;
    --gfmr-shiki-string-light: #0a3069;
    --gfmr-shiki-number-light: #0550ae;
    
    /* Dark Theme - Shiki GitHub Dark */
    --gfmr-shiki-bg-dark: #0d1117;
    --gfmr-shiki-border-dark: #30363d;
    --gfmr-shiki-text-dark: #e6edf3;
    --gfmr-shiki-primary-dark: #79c0ff;
    --gfmr-shiki-comment-dark: #8b949e;
    --gfmr-shiki-keyword-dark: #ff7b72;
    --gfmr-shiki-string-dark: #a5d6ff;
    --gfmr-shiki-number-dark: #79c0ff;
    
    /* 現在のテーマに応じた動的変数 (デフォルト: Light) */
    --gfmr-shiki-bg: var(--gfmr-shiki-bg-light);
    --gfmr-shiki-border: var(--gfmr-shiki-border-light);
    --gfmr-shiki-text: var(--gfmr-shiki-text-light);
    --gfmr-shiki-primary: var(--gfmr-shiki-primary-light);
    --gfmr-shiki-comment: var(--gfmr-shiki-comment-light);
    --gfmr-shiki-keyword: var(--gfmr-shiki-keyword-light);
    --gfmr-shiki-string: var(--gfmr-shiki-string-light);
    --gfmr-shiki-number: var(--gfmr-shiki-number-light);
    
    /* Legacy Variables (互換性のために保持) */
    --gfmr-code-bg-light: var(--gfmr-shiki-bg-light);
    --gfmr-code-border-light: var(--gfmr-shiki-border-light);
    --gfmr-code-text-light: var(--gfmr-shiki-text-light);
    --gfmr-code-bg-dark: var(--gfmr-shiki-bg-dark);
    --gfmr-code-border-dark: var(--gfmr-shiki-border-dark);
    --gfmr-code-text-dark: var(--gfmr-shiki-text-dark);
    
    /* === Copy Button Variables === */
    --gfmr-copy-btn-size: 32px;
    --gfmr-copy-btn-bg: rgba(255, 255, 255, 0.9);
    --gfmr-copy-btn-border: rgba(0, 0, 0, 0.1);
    --gfmr-copy-btn-hover: rgba(255, 255, 255, 1);
    --gfmr-copy-btn-active: rgba(240, 240, 240, 1);
    
    /* === Mermaid Variables === */
    --gfmr-mermaid-bg: #f8f9fa;
    --gfmr-mermaid-border: none;
    --gfmr-mermaid-padding: 20px;
    
    /* === Animation Variables === */
    --gfmr-transition-fast: 0.15s ease;
    --gfmr-transition-normal: 0.25s ease;
    --gfmr-transition-slow: 0.35s ease;

	/* Colors - Base Palette */
	--gfmr-primary: #0366d6;
	--gfmr-text: #1e1e1e;
	--gfmr-text-secondary: #666;
	--gfmr-background: #fff;
	--gfmr-surface: #f6f8fa;

	/* Border System */
	--gfmr-border-width: 1px;
	--gfmr-border-style: solid;
	--gfmr-border-color: #ddd;
	--gfmr-border-light: #eee;
	--gfmr-border-strong: #d0d7de;
	--gfmr-border-radius: 3px;
	--gfmr-border-radius-lg: 6px;

	/* Border Shorthand Properties */
	--gfmr-border: var(--gfmr-border-width) var(--gfmr-border-style) var(--gfmr-border-color);
	--gfmr-border-none: 0;

	/* Typography */
	--gfmr-font-mono: "Fira Code", "SF Mono", monaco, "Cascadia Code", "Roboto Mono", consolas, "Courier New", monospace;
	--gfmr-font-system: -apple-system, blinkmacsystemfont, "Segoe UI", "Noto Sans", helvetica, arial, sans-serif;

	/* Spacing */
	--gfmr-spacing-xs: 4px;
	--gfmr-spacing-sm: 8px;
	--gfmr-spacing-md: 12px;
	--gfmr-spacing-lg: 16px;
	--gfmr-spacing-xl: 24px;

	/* Code Blocks */
	--gfmr-code-bg: #f6f8fa;
	--gfmr-code-border: var(--gfmr-border-color);
	--gfmr-code-text: #1e1e1e;
	--gfmr-code-inline-bg: rgba(27, 31, 35, 0.05);

	/* Tables */
	--gfmr-table-border: var(--gfmr-border);
	--gfmr-table-header-bg: var(--gfmr-surface);
	--gfmr-table-stripe-bg: var(--gfmr-surface);

	/* Copy Button */
	--gfmr-copy-text: #24292f;
	--gfmr-copy-bg: rgba(255, 255, 255, 0.8);
	--gfmr-copy-border: rgba(31, 35, 40, 0.15);
	--gfmr-copy-focus: #0969da;

	/* Mermaid Diagrams */
	--gfmr-mermaid-bg: #fff;
	--gfmr-mermaid-border: none;
	--gfmr-mermaid-error-bg: #fff5f5;
	--gfmr-mermaid-error-border: #feb2b2;
	--gfmr-mermaid-error-text: #c53030;
}

/* ==========================================================================
   Dark Theme Variables - CSS Design System
   ========================================================================== */

:root {

/* ========================================
   カラーシステム - GitHub準拠
   ======================================== */

	/* プライマリーカラー */
	--gfmr-color-primary: #238636;
	--gfmr-color-primary-hover: #2ea043;
	--gfmr-color-primary-active: #1a7f37;

	/* セカンダリーカラー */
	--gfmr-color-secondary: #21262d;
	--gfmr-color-secondary-hover: #30363d;
	--gfmr-color-secondary-active: #161b22;

	/* 背景色 */
	--gfmr-bg-canvas: #fff;
	--gfmr-bg-default: #fff;
	--gfmr-bg-muted: #f6f8fa;
	--gfmr-bg-subtle: #f6f8fa;
	--gfmr-bg-overlay: rgba(31, 35, 40, 0.15);

	/* コードブロック背景 */
	--gfmr-bg-code: #f6f8fa;
	--gfmr-bg-code-inline: rgba(175, 184, 193, 0.2);

	/* テキストカラー */
	--gfmr-text-primary: #24292f;
	--gfmr-text-secondary: #656d76;
	--gfmr-text-muted: #656d76;
	--gfmr-text-inverse: #fff;
	--gfmr-text-link: #0969da;
	--gfmr-text-link-hover: #0550ae;

	/* ボーダーカラー */
	--gfmr-border-default: #d0d7de;
	--gfmr-border-muted: #d8dee4;
	--gfmr-border-subtle: #f6f8fa;

	/* 状態カラー */
	--gfmr-color-success: #1a7f37;
	--gfmr-color-warning: #d1242f;
	--gfmr-color-error: #cf222e;
	--gfmr-color-info: #0969da;

	/* 成功状態 */
	--gfmr-success-bg: #dafbe1;
	--gfmr-success-border: #1a7f37;
	--gfmr-success-text: #116329;

	/* 警告状態 */
	--gfmr-warning-bg: #fff8c5;
	--gfmr-warning-border: #d1242f;
	--gfmr-warning-text: #633c01;

	/* エラー状態 */
	--gfmr-error-bg: #ffebe9;
	--gfmr-error-border: #cf222e;
	--gfmr-error-text: #82071e;

	/* 情報状態 */
	--gfmr-info-bg: #ddf4ff;
	--gfmr-info-border: #0969da;
	--gfmr-info-text: #0550ae;

	/* ========================================
       ダークテーマカラー
       ======================================== */

	/* プライマリーカラー (ダーク) */
	--gfmr-dark-color-primary: #238636;
	--gfmr-dark-color-primary-hover: #2ea043;
	--gfmr-dark-color-primary-active: #1a7f37;

	/* 背景色 (ダーク) */
	--gfmr-dark-bg-canvas: #0d1117;
	--gfmr-dark-bg-default: #0d1117;
	--gfmr-dark-bg-muted: #161b22;
	--gfmr-dark-bg-subtle: #21262d;
	--gfmr-dark-bg-overlay: rgba(31, 35, 40, 0.7);

	/* コードブロック背景 (ダーク) */
	--gfmr-dark-bg-code: #161b22;
	--gfmr-dark-bg-code-inline: rgba(110, 118, 129, 0.4);

	/* テキストカラー (ダーク) */
	--gfmr-dark-text-primary: #f0f6fc;
	--gfmr-dark-text-secondary: #8b949e;
	--gfmr-dark-text-muted: #7d8590;
	--gfmr-dark-text-inverse: #24292f;
	--gfmr-dark-text-link: #58a6ff;
	--gfmr-dark-text-link-hover: #79c0ff;

	/* ボーダーカラー (ダーク) */
	--gfmr-dark-border-default: #30363d;
	--gfmr-dark-border-muted: #21262d;
	--gfmr-dark-border-subtle: #161b22;

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

	/* 基本スペーシング (8px base) */
	--gfmr-space-0: 0;
	--gfmr-space-1: 4px;   /* 0.25rem */
	--gfmr-space-2: 8px;   /* 0.5rem */
	--gfmr-space-3: 12px;  /* 0.75rem */
	--gfmr-space-4: 16px;  /* 1rem */
	--gfmr-space-5: 20px;  /* 1.25rem */
	--gfmr-space-6: 24px;  /* 1.5rem */
	--gfmr-space-8: 32px;  /* 2rem */
	--gfmr-space-10: 40px; /* 2.5rem */
	--gfmr-space-12: 48px; /* 3rem */
	--gfmr-space-16: 64px; /* 4rem */
	--gfmr-space-20: 80px; /* 5rem */

	/* 特定用途スペーシング */
	--gfmr-padding-button: var(--gfmr-space-2) var(--gfmr-space-4);
	--gfmr-padding-input: var(--gfmr-space-2) var(--gfmr-space-3);
	--gfmr-padding-modal: var(--gfmr-space-6);
	--gfmr-margin-section: var(--gfmr-space-8) 0;

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

	/* フォントファミリー */
	--gfmr-font-family-base: -apple-system, blinkmacsystemfont, "Segoe UI", "Noto Sans", helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--gfmr-font-family-mono: "SFMono-Regular", "Fira Code", consolas, "Liberation Mono", menlo, courier, monospace;

	/* フォントサイズ */
	--gfmr-font-size-xs: 12px;
	--gfmr-font-size-sm: 14px;
	--gfmr-font-size-base: 16px;
	--gfmr-font-size-lg: 18px;
	--gfmr-font-size-xl: 20px;
	--gfmr-font-size-2xl: 24px;
	--gfmr-font-size-3xl: 28px;

	/* 行高 */
	--gfmr-line-height-tight: 1.25;
	--gfmr-line-height-base: 1.5;
	--gfmr-line-height-relaxed: 1.75;

	/* フォント重み */
	--gfmr-font-weight-normal: 400;
	--gfmr-font-weight-medium: 500;
	--gfmr-font-weight-semibold: 600;
	--gfmr-font-weight-bold: 700;

	/* ========================================
       ボーダー・角丸
       ======================================== */

	/* ボーダー幅 */
	--gfmr-border-width-thin: 1px;
	--gfmr-border-width-thick: 2px;

	/* 角丸 */
	--gfmr-border-radius-sm: 3px;
	--gfmr-border-radius-base: 6px;
	--gfmr-border-radius-lg: 8px;
	--gfmr-border-radius-xl: 12px;
	--gfmr-border-radius-full: 50%;

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

	--gfmr-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.04);
	--gfmr-shadow-base: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
	--gfmr-shadow-lg: 0 4px 12px rgba(31, 35, 40, 0.15), 0 2px 4px rgba(31, 35, 40, 0.12);
	--gfmr-shadow-xl: 0 8px 24px rgba(31, 35, 40, 0.2), 0 2px 4px rgba(31, 35, 40, 0.12);

	/* フォーカスシャドウ */
	--gfmr-shadow-focus: 0 0 0 3px rgba(35, 134, 54, 0.15);

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

	/* デュレーション */
	--gfmr-duration-fast: 0.1s;
	--gfmr-duration-base: 0.15s;
	--gfmr-duration-slow: 0.3s;
	--gfmr-duration-slower: 0.5s;

	/* イージング */
	--gfmr-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--gfmr-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--gfmr-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* 基本トランジション */
	--gfmr-transition-fast: all var(--gfmr-duration-fast) var(--gfmr-ease-out);
	--gfmr-transition-base: all var(--gfmr-duration-base) var(--gfmr-ease-out);
	--gfmr-transition-slow: all var(--gfmr-duration-slow) var(--gfmr-ease-out);

	/* ========================================
       Z-Index階層
       ======================================== */

	--gfmr-z-index-dropdown: 1000;
	--gfmr-z-index-sticky: 1020;
	--gfmr-z-index-fixed: 1030;
	--gfmr-z-index-modal-backdrop: 1040;
	--gfmr-z-index-modal: 1050;
	--gfmr-z-index-popover: 1060;
	--gfmr-z-index-tooltip: 1070;
	--gfmr-z-index-notification: 1080;

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

	--gfmr-breakpoint-sm: 576px;
	--gfmr-breakpoint-md: 768px;
	--gfmr-breakpoint-lg: 992px;
	--gfmr-breakpoint-xl: 1200px;
	--gfmr-breakpoint-2xl: 1400px;
}

/* ==========================================================================
   ダークテーマ適用
   ========================================================================== */

/* === Auto Dark Mode Support === */

/* WordPress管理画面では常にライトテーマを適用 */
.wp-admin :root,
.wp-admin,
.wp-admin .gfmr-markdown-block,
.wp-admin .gfmr-markdown-editor,
.wp-admin .gfmr-markdown-preview,
.wp-admin .gfmr-markdown-rendered-preview,
body.wp-admin,
body.wp-admin .gfmr-markdown-block,
body.wp-admin .gfmr-markdown-editor,
body.wp-admin .gfmr-markdown-preview {

	/* 管理画面用の明示的なライトテーマ変数 */
	--gfmr-background: #fff !important;
	--gfmr-surface: #f6f8fa !important;
	--gfmr-text: #1e1e1e !important;
	--gfmr-text-secondary: #666 !important;
	--gfmr-border-color: #ddd !important;
	--gfmr-code-bg: #f6f8fa !important;
	--gfmr-code-text: #1e1e1e !important;
}

@media (prefers-color-scheme: dark) {

    /* フロントエンドのみダークテーマ適用（管理画面除外） */
    :root:not(.wp-admin) {

        /* === Shiki Color Protection - Dark Theme === */
        --gfmr-shiki-bg: var(--gfmr-shiki-bg-dark);
        --gfmr-shiki-border: var(--gfmr-shiki-border-dark);
        --gfmr-shiki-text: var(--gfmr-shiki-text-dark);
        --gfmr-shiki-primary: var(--gfmr-shiki-primary-dark);
        --gfmr-shiki-comment: var(--gfmr-shiki-comment-dark);
        --gfmr-shiki-keyword: var(--gfmr-shiki-keyword-dark);
        --gfmr-shiki-string: var(--gfmr-shiki-string-dark);
        --gfmr-shiki-number: var(--gfmr-shiki-number-dark);
        
        /* Legacy Variables (互換性のために更新) */
        --gfmr-code-bg: var(--gfmr-code-bg-dark);
        --gfmr-code-border: var(--gfmr-code-border-dark);
        --gfmr-code-text: var(--gfmr-code-text-dark);
        
        --gfmr-copy-btn-bg: rgba(36, 41, 46, 0.9);
        --gfmr-copy-btn-border: rgba(255, 255, 255, 0.1);
        --gfmr-copy-btn-hover: rgba(36, 41, 46, 1);
        --gfmr-copy-btn-active: rgba(48, 54, 61, 1);
        
        --gfmr-mermaid-bg: #161b22;
        --gfmr-mermaid-border: none;

		/* Colors - Dark Palette */
		--gfmr-primary: #58a6ff;
		--gfmr-text: #f0f6fc;
		--gfmr-text-secondary: #8b949e;
		--gfmr-background: #0d1117;
		--gfmr-surface: #161b22;

		/* Border System - Dark */
		--gfmr-border-color: #30363d;
		--gfmr-border-light: #21262d;
		--gfmr-border-strong: #8b949e;

		/* Border Shorthand Properties - Dark */
		--gfmr-border: var(--gfmr-border-width) var(--gfmr-border-style) var(--gfmr-border-color);

		/* Code Blocks - Dark */
		--gfmr-code-bg: #0d1117;
		--gfmr-code-border: var(--gfmr-border-color);
		--gfmr-code-text: #f0f6fc;
		--gfmr-code-inline-bg: rgba(240, 246, 252, 0.1);

		/* Tables - Dark */
		--gfmr-table-border: var(--gfmr-border);
		--gfmr-table-header-bg: var(--gfmr-surface);
		--gfmr-table-stripe-bg: rgba(240, 246, 252, 0.05);

		/* Copy Button - Dark */
		--gfmr-copy-text: #f0f6fc;
		--gfmr-copy-bg: rgba(240, 246, 252, 0.1);
		--gfmr-copy-border: rgba(240, 246, 252, 0.2);
		--gfmr-copy-focus: #58a6ff;

		/* Mermaid Diagrams - Dark */
		--gfmr-mermaid-bg: var(--gfmr-surface);
		--gfmr-mermaid-border: none;
		--gfmr-mermaid-error-bg: rgba(248, 81, 73, 0.1);
		--gfmr-mermaid-error-border: rgba(248, 81, 73, 0.3);
		--gfmr-mermaid-error-text: #ff7b72;
	}
}

@media (prefers-color-scheme: light) {

    :root {
        --gfmr-code-bg: var(--gfmr-code-bg-light);
        --gfmr-code-border: var(--gfmr-code-border-light);
        --gfmr-code-text: var(--gfmr-code-text-light);
    }
}

/* ==========================================================================
   Explicit Theme Classes
   ========================================================================== */

.gfmr-theme-light {

	/* Override for explicit light theme */
	--gfmr-primary: #0366d6;
	--gfmr-text: #1e1e1e;
	--gfmr-text-secondary: #666;
	--gfmr-background: #fff;
	--gfmr-surface: #f6f8fa;
	--gfmr-border-color: #ddd;
	--gfmr-border-light: #eee;
	--gfmr-border-strong: #d0d7de;
}

.gfmr-theme-dark {

	/* Override for explicit dark theme */
	--gfmr-primary: #58a6ff;
	--gfmr-text: #f0f6fc;
	--gfmr-text-secondary: #8b949e;
	--gfmr-background: #0d1117;
	--gfmr-surface: #161b22;
	--gfmr-border-color: #30363d;
	--gfmr-border-light: #21262d;
	--gfmr-border-strong: #8b949e;
}

/* ==========================================================================
   Border Reset Utilities
   ========================================================================== */

/* 統一されたボーダーリセット - 競合を防ぐ単一セレクター */
.gfmr-border-reset,
.gfmr-markdown-rendered pre code,
.gfmr-markdown-rendered-preview pre code,
.gfmr-markdown-editor,
.gfmr-markdown-rendered hr {
	border: var(--gfmr-border-none) !important;
}

/* ボーダー適用ユーティリティ */
.gfmr-border {
	border: var(--gfmr-border);
}

.gfmr-border-light {
	border: var(--gfmr-border-light);
}

.gfmr-border-strong {
	border: var(--gfmr-border-strong);
}

.gfmr-border-bottom {
	border-bottom: var(--gfmr-border-light);
}

.gfmr-border-top {
	border-top: var(--gfmr-border);
}

/* ==========================================================================
   High Contrast Support
   ========================================================================== */

@media (prefers-contrast: high) {

	:root {
		--gfmr-border-width: 2px;
		--gfmr-border-color: #000;
		--gfmr-border-light: #333;
		--gfmr-border-strong: #000;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {

	:root {

		/* Print-optimized borders */
		--gfmr-border-color: #000;
		--gfmr-border-light: #666;
		--gfmr-border-strong: #000;
		--gfmr-background: #fff;
		--gfmr-text: #000;

		/* ダークテーマ時のカラー変更 */
		--gfmr-bg-canvas: var(--gfmr-dark-bg-canvas);
		--gfmr-bg-default: var(--gfmr-dark-bg-default);
		--gfmr-bg-muted: var(--gfmr-dark-bg-muted);
		--gfmr-bg-subtle: var(--gfmr-dark-bg-subtle);
		--gfmr-bg-overlay: var(--gfmr-dark-bg-overlay);
		--gfmr-bg-code: var(--gfmr-dark-bg-code);
		--gfmr-bg-code-inline: var(--gfmr-dark-bg-code-inline);

		--gfmr-text-primary: var(--gfmr-dark-text-primary);
		--gfmr-text-secondary: var(--gfmr-dark-text-secondary);
		--gfmr-text-muted: var(--gfmr-dark-text-muted);
		--gfmr-text-inverse: var(--gfmr-dark-text-inverse);
		--gfmr-text-link: var(--gfmr-dark-text-link);
		--gfmr-text-link-hover: var(--gfmr-dark-text-link-hover);

		--gfmr-border-default: var(--gfmr-dark-border-default);
		--gfmr-border-muted: var(--gfmr-dark-border-muted);
		--gfmr-border-subtle: var(--gfmr-dark-border-subtle);
	}
}

/* 強制ダークテーマクラス */
.gfmr-dark {
	--gfmr-bg-canvas: var(--gfmr-dark-bg-canvas);
	--gfmr-bg-default: var(--gfmr-dark-bg-default);
	--gfmr-bg-muted: var(--gfmr-dark-bg-muted);
	--gfmr-bg-subtle: var(--gfmr-dark-bg-subtle);
	--gfmr-bg-overlay: var(--gfmr-dark-bg-overlay);
	--gfmr-bg-code: var(--gfmr-dark-bg-code);
	--gfmr-bg-code-inline: var(--gfmr-dark-bg-code-inline);

	--gfmr-text-primary: var(--gfmr-dark-text-primary);
	--gfmr-text-secondary: var(--gfmr-dark-text-secondary);
	--gfmr-text-muted: var(--gfmr-dark-text-muted);
	--gfmr-text-inverse: var(--gfmr-dark-text-inverse);
	--gfmr-text-link: var(--gfmr-dark-text-link);
	--gfmr-text-link-hover: var(--gfmr-dark-text-link-hover);

	--gfmr-border-default: var(--gfmr-dark-border-default);
	--gfmr-border-muted: var(--gfmr-dark-border-muted);
	--gfmr-border-subtle: var(--gfmr-dark-border-subtle);
}

/* 強制ライトテーマクラス */
.gfmr-light {
	--gfmr-bg-canvas: #fff;
	--gfmr-bg-default: #fff;
	--gfmr-bg-muted: #f6f8fa;
	--gfmr-bg-subtle: #f6f8fa;
	--gfmr-bg-overlay: rgba(31, 35, 40, 0.15);
	--gfmr-bg-code: #f6f8fa;
	--gfmr-bg-code-inline: rgba(175, 184, 193, 0.2);

	--gfmr-text-primary: #24292f;
	--gfmr-text-secondary: #656d76;
	--gfmr-text-muted: #656d76;
	--gfmr-text-inverse: #fff;
	--gfmr-text-link: #0969da;
	--gfmr-text-link-hover: #0550ae;

	--gfmr-border-default: #d0d7de;
	--gfmr-border-muted: #d8dee4;
	--gfmr-border-subtle: #f6f8fa;
}

/* ==========================================================================
   レスポンシブヘルパー
   ========================================================================== */

/* モバイルファースト */
@media (max-width: 767px) {

	:root {
		--gfmr-padding-modal: var(--gfmr-space-4);
		--gfmr-font-size-base: 14px;
	}
}

/* タブレット */
@media (min-width: 768px) and (max-width: 991px) {

	:root {
		--gfmr-padding-modal: var(--gfmr-space-5);
	}
}

/* デスクトップ */
@media (min-width: 992px) {

	:root {
		--gfmr-padding-modal: var(--gfmr-space-6);
	}
}

/* ==========================================================================
   アクセシビリティ
   ========================================================================== */

/* アニメーション無効設定 */
@media (prefers-reduced-motion: reduce) {

	:root {
		--gfmr-duration-fast: 0s;
		--gfmr-duration-base: 0s;
		--gfmr-duration-slow: 0s;
		--gfmr-duration-slower: 0s;
		--gfmr-transition-fast: none;
		--gfmr-transition-base: none;
		--gfmr-transition-slow: none;
	}
}

/* ハイコントラスト設定 */
@media (prefers-contrast: high) {

	:root {
		--gfmr-border-width-thin: 2px;
		--gfmr-border-width-thick: 3px;
		--gfmr-shadow-focus: 0 0 0 4px rgba(35, 134, 54, 0.5);
	}
}

/* ==========================================================================
   ユーティリティクラス
   ========================================================================== */

/* スクリーンリーダー専用 */
.gfmr-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* フォーカス時に表示 */
.gfmr-sr-only-focusable:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: inherit !important;
	margin: inherit !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: inherit !important;
}

/* トランケート */
.gfmr-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* レスポンシブ表示制御 */
.gfmr-d-none {
	display: none !important;
}

.gfmr-d-block {
	display: block !important;
}

.gfmr-d-flex {
	display: flex !important;
}

@media (max-width: 767px) {

	.gfmr-d-sm-none {
		display: none !important;
	}

	.gfmr-d-sm-block {
		display: block !important;
	}

	.gfmr-d-sm-flex {
		display: flex !important;
	}
}

@media (min-width: 768px) {

	.gfmr-d-md-none {
		display: none !important;
	}

	.gfmr-d-md-block {
		display: block !important;
	}

	.gfmr-d-md-flex {
		display: flex !important;
	}
}

/* === Base Styles for Shiki Integration === */
.shiki {
    font-family: var(--gfmr-code-font-family);
    font-size: var(--gfmr-code-font-size);
    line-height: var(--gfmr-code-line-height);
    border-radius: var(--gfmr-code-border-radius);
    overflow-x: auto;
    position: relative;
}

.shiki code {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* === Shiki Color Protection === */

/* Shikiが生成した色を保護し、CSSリセットによる透明化を防ぐ */
.shiki,
.shiki pre,
.shiki code {

    /* 背景色の透明化を防ぐ - ただし明示的な背景色がある場合のみ */

    /* background-color: inherit !important; ← 一時的に無効化：全体背景への影響を確認 */
}

/* Shiki保護ルールは gfmr-copy-button.css に統一移行済み */

/* === Enhanced Copy Button Positioning === */
.gfmr-code-container {
    position: relative;
}

.gfmr-copy-button {
    width: var(--gfmr-copy-btn-size);
    height: var(--gfmr-copy-btn-size);
    background: var(--gfmr-copy-btn-bg);
    border: 1px solid var(--gfmr-copy-btn-border);
    border-radius: 6px;
    transition: all var(--gfmr-transition-fast);
    backdrop-filter: blur(8px);
}

.gfmr-copy-button:hover {
    background: var(--gfmr-copy-btn-hover);
    transform: scale(1.05);
}

.gfmr-copy-button:active {
    background: var(--gfmr-copy-btn-active);
    transform: scale(0.95);
}

/* === Responsive Design === */
@media (max-width: 768px) {

    :root {
        --gfmr-code-font-size: 13px;
        --gfmr-code-padding: 12px;
        --gfmr-copy-btn-size: 28px;
    }
}