/* ========================================
   SparkSheets Design System - CSS Variables
   Created: 2025-11-22
   Purpose: Unified design tokens for main site + admin
   ======================================== */

:root {
    /* ========== Brand Colors ========== */
    --primary: #007bff;              /* SparkSheets Blue */
    --primary-dark: #0056b3;
    --primary-light: rgba(0, 123, 255, 0.1);
    --primary-hover: #0069d9;

    --secondary: #667eea;            /* Purple (for gradients) */
    --secondary-dark: #764ba2;

    --accent-blue: #2196f3;          /* Material Blue */
    --ios-blue: #007AFF;             /* iOS Blue */

    /* ========== Semantic Colors ========== */
    --success: #10B981;              /* Green */
    --danger: #EF4444;               /* Red */
    --warning: #F59E0B;              /* Orange */
    --info: #3B82F6;                 /* Blue */

    /* ========== Neutral Colors (9-step Gray Scale) ========== */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* ========== Background Colors ========== */
    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f7;
    --bg-tertiary: #F3F4F6;          /* gray-100 */

    /* ========== Text Colors ========== */
    --text-primary: #1a1a1a;         /* gray-900相当 */
    --text-secondary: #666666;       /* gray-500相当 */
    --text-muted: #adb5bd;           /* gray-400相当 */

    /* ========== Border Colors ========== */
    --border-primary: #e0e0e0;       /* gray-200相当 */
    --border-light: #f0f0f0;         /* gray-100相当 */
    --border-dark: #D1D5DB;          /* gray-300 */

    /* ========== Gradients ========== */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-hero: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    --gradient-cta: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    /* ========== Shadows ========== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

    /* ========== Spacing (8px base) ========== */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-2xl: 4rem;     /* 64px */
    --spacing-3xl: 6rem;     /* 96px */

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

    /* ========== Typography ========== */
    --font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.5rem;    /* 24px */
    --font-size-2xl: 2rem;     /* 32px */
    --font-size-3xl: 3rem;     /* 48px */

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

    /* ========== Transitions ========== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ========== Z-Index ========== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 500;
    --z-mini-menu: 10000;
    --z-mini-menu-dragging: 100300;
    --z-modal: 100000;
    --z-toast: 100100;
    --z-tooltip: 100200;

    /* ========== Layout (Admin specific) ========== */
    --header-height: 64px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;

    /* ========== Editor Specific ========== */
    --resizer-height: 12px;
    --resizer-border-width: 1px;
    --resizer-color: var(--border-primary);
    --resizer-hover-color: var(--text-muted);
    --resizer-active-color: var(--text-primary);

    --timer-progress-active: #a0cff1;
    --timer-progress-inactive: #f0f0f0;

    /* ========== Legacy Variable Aliases (backward compatibility) ========== */
    --border-color: var(--border-primary);
    --main-bg: var(--bg-primary);
    --secondary-bg: var(--bg-secondary);
    --primary-color: var(--primary);
    --text-color: var(--text-primary);
    --text-muted-color: var(--text-muted);
}

/* ========================================
   Dark/Light Mode Transition Helper
   ======================================== */
/* オーバーレイ方式で切替時、要素のtransitionを無効化 */
body.no-transition,
body.no-transition *,
body.no-transition *::before,
body.no-transition *::after {
    transition: none !important;
}

/* ========================================
   Dark Mode Theme
   ======================================== */
body.dark-mode {
    /* Brand Colors (adjusted for dark) */
    --primary: #4db8ff;
    --primary-dark: #3a9bdb;
    --primary-light: rgba(77, 184, 255, 0.1);
    --primary-hover: #66c2ff;

    --accent-blue: #42a5f5;          /* Material Blue (lighter) */
    --ios-blue: #0A84FF;             /* iOS Blue (lighter) */

    /* Background */
    --bg-primary: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #333333;

    /* Text */
    --text-primary: #e0e0e0;
    --text-secondary: #aaaaaa;
    --text-muted: #888888;

    /* Border */
    --border-primary: #444;
    --border-light: #555;
    --border-dark: #333;

    /* Grays (inverted) */
    --gray-50: #1F2937;
    --gray-100: #374151;
    --gray-200: #4B5563;
    --gray-300: #6B7280;
    --gray-400: #9CA3AF;
    --gray-500: #D1D5DB;
    --gray-600: #E5E7EB;
    --gray-700: #F3F4F6;
    --gray-800: #F9FAFB;
    --gray-900: #FFFFFF;

    /* Resizer (dark mode adjustments) */
    --resizer-color: #444;
    --resizer-hover-color: #888;
    --resizer-active-color: #e0e0e0;

    --timer-progress-active: #4db8ff;
    --timer-progress-inactive: #333;
}