:root {
    /* Typography */
    --font-body: "Inter", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Inter", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Brand colors */
    --color-primary: #5046e5;
    --color-primary-light: #6366f1;
    --color-primary-dark: #4338ca;
    --color-secondary: #7c3aed;
    --color-accent: #e11d48;
    --color-info: #0284c7;
    --color-success: #059669;
    --color-success-bright: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* Neutral palette */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Backgrounds */
    --color-bg-body: #f6f8fb;
    --color-bg-surface: #ffffff;
    --color-bg-alt: #f4f4f5;

    /* Text colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-muted: var(--color-gray-500);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 30px;

    /* Font scale */
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-lg: 16px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 28px;

    /* RADIUS */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 25px -12px rgba(15, 23, 42, 0.22);
    --shadow-xl: 0 20px 45px -20px rgba(15, 23, 42, 0.25);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* Transparency */
    --opacity-light: 0.05;
    --opacity-medium: 0.1;
    --opacity-heavy: 0.2;

    /* Layout */
    --sidebar-width: 360px;
    --gradient-surface: linear-gradient(135deg, var(--color-gray-50) 0%, #ffffff 50%, var(--color-gray-50) 100%);
    --gradient-title: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-500) 100%);
    --gradient-card: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    --gradient-button-hover: linear-gradient(135deg, #faf5ff 0%, #fce7f3 100%);
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-header: 50;
    --z-modal: 100;

    /* Legacy aliases */
    --primary: var(--color-primary);
    --primary-light: var(--color-primary-light);
    --primary-dark: var(--color-primary-dark);
    --secondary: var(--color-secondary);
    --accent: var(--color-accent);
    --info: var(--color-info);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --danger-color: var(--color-danger);
    --gray-50: var(--color-gray-50);
    --gray-100: var(--color-gray-100);
    --gray-200: var(--color-gray-200);
    --gray-300: var(--color-gray-300);
    --gray-400: var(--color-gray-400);
    --gray-500: var(--color-gray-500);
    --gray-600: var(--color-gray-600);
    --gray-700: var(--color-gray-700);
    --gray-800: var(--color-gray-800);
    --gray-900: var(--color-gray-900);
    --gradient-background: var(--gradient-surface);
}