/* ============================================================
   CSS Variables
   Design Tokens for Tavern Defense
   ============================================================ */

:root {
    /* ========== Colors ========== */

    /* Background Colors */
    --color-bg-primary: #1a1a2e;
    /* body 배경 */
    --color-bg-secondary: #16213e;
    /* canvas, info 배경 */
    --color-bg-tertiary: #0f0f23;
    /* log 배경 */

    /* Accent Colors */
    --color-accent-red: #e94560;
    /* 테두리, 제목 */
    --color-accent-green: #4ecca3;
    /* 값 표시, 버튼 */
    --color-accent-yellow: #ffd166;
    /* 버튼 */

    /* Text Colors */
    --color-text-primary: #eee;
    /* 기본 텍스트 */
    --color-text-secondary: #888;
    /* 라벨 */
    --color-text-dark: #222;
    /* 로그 구분선 */

    /* ========== Canvas ========== */
    --canvas-width: 512px;
    --canvas-height: 626px;
    --canvas-border-width: 2px;
    --canvas-border-radius: 8px;

    /* ========== Spacing ========== */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;

    /* ========== Typography ========== */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 24px;
    --font-size-xl: 32px;

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

    /* ========== UI Components ========== */
    --button-padding: 8px 16px;
    --button-border-radius: 4px;
    --panel-border-radius: var(--canvas-border-radius);
    --panel-min-width: 400px;

    /* ========== Transitions ========== */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ========== Z-Index ========== */
    --z-canvas: 1;
    --z-overlay: 10;
    --z-modal: 100;
}