/**
 * WP-THEMES Engine - 変数定義 (CSS Variables)
 *
 * @package WTE
 * @since   1.0.0
 */

:root {
    /* ========================================
     * カラーパレット
     * ======================================== */
    /* カスタマイザー設定の基本8色 */
    --wte-color-main: #1a1a2e;
    --wte-color-button: #e94560;
    --wte-color-text: #2c2c2c;
    --wte-color-header: #ffffff;
    --wte-color-footer: #1a1a2e;
    --wte-color-link: #e94560;
    --wte-color-bg: #f8f8f6;

    /* ホバー用派生色 */
    --wte-color-button-hover: #c23152;
    --wte-color-link-hover: #c23152;

    /* 背景とテキストの派生色（テキストカラー依存等） */
    --wte-color-bg-alt: color-mix(in srgb, var(--wte-color-text) 5%, var(--wte-color-bg));
    --wte-color-bg-white: #ffffff;
    --wte-color-text-inverse: #ffffff;

    --wte-color-text-light: color-mix(in srgb, var(--wte-color-text) 70%, transparent);
    --wte-color-text-muted: color-mix(in srgb, var(--wte-color-text) 45%, transparent);

    --wte-color-border: color-mix(in srgb, var(--wte-color-text) 15%, transparent);
    --wte-color-border-light: color-mix(in srgb, var(--wte-color-text) 8%, transparent);

    /* ステータスカラー（固定） */
    --wte-color-success: #10b981;
    --wte-color-warning: #f59e0b;
    --wte-color-error: #ef4444;
    --wte-color-info: #3b82f6;

    /* ========================================
     * タイポグラフィ
     * ======================================== */
    --wte-font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;
    --wte-font-family-en: "Inter", "Helvetica Neue", "Arial", sans-serif;
    --wte-font-family-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;

    --wte-font-size-xs: clamp(0.5625rem, 0.55rem + 0.1vw, 0.6875rem);
    --wte-font-size-sm: clamp(0.6875rem, 0.65rem + 0.1vw, 0.8125rem);
    --wte-font-size-base: clamp(0.8125rem, 0.8rem + 0.1vw, 0.9375rem);
    --wte-font-size-md: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    --wte-font-size-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --wte-font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --wte-font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --wte-font-size-3xl: clamp(1.75rem, 1.5rem + 1.5vw, 3rem);

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

    --wte-line-height-tight: 1.3;
    --wte-line-height-base: 1.8;
    --wte-line-height-relaxed: 2.0;

    --wte-letter-spacing-tight: -0.02em;
    --wte-letter-spacing-base: 0.04em;
    --wte-letter-spacing-wide: 0.08em;
    --wte-letter-spacing-wider: 0.12em;

    /* ========================================
     * スペーシング
     * ======================================== */
    --wte-space-2xs: 0.25rem;
    --wte-space-xs: 0.5rem;
    --wte-space-sm: 0.75rem;
    --wte-space-md: 1rem;
    --wte-space-lg: 1.5rem;
    --wte-space-xl: 2rem;
    --wte-space-2xl: 3rem;
    --wte-space-3xl: 4rem;
    --wte-space-4xl: 6rem;
    --wte-space-5xl: 8rem;

    --wte-section-gap: clamp(3rem, 2.5rem + 2.5vw, 6rem);

    /* ========================================
     * レイアウト
     * ======================================== */
    --wte-container-max: 1200px;
    --wte-container-narrow: 800px;
    --wte-container-wide: 1400px;
    --wte-container-padding: clamp(1rem, 0.5rem + 2.5vw, 2rem);

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

    /* ========================================
     * シャドウ（ミニマルでクリーンな影）
     * ======================================== */
    --wte-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --wte-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --wte-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --wte-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --wte-shadow-puffy: 0 4px 0 var(--wte-color-accent-dark);
    --wte-shadow-hover: 0 6px 0 var(--wte-color-accent-dark);

    /* ========================================
     * トランジション
     * ======================================== */
    --wte-transition-fast: 150ms ease;
    --wte-transition-base: 250ms ease;
    --wte-transition-slow: 400ms ease;

    /* ========================================
     * Zインデックス
     * ======================================== */
    --wte-z-dropdown: 100;
    --wte-z-sticky: 200;
    --wte-z-fixed: 300;
    --wte-z-overlay: 400;
    --wte-z-modal: 500;
    --wte-z-toast: 600;
}