/**
 * Welltech Design System - "Friendly Professional"
 * 治療院向けマーケティング支援ツールのUIコンポーネントセット
 */

:root {
    /* ===== Color System ===== */
    
    /* Primary Color: Dark Cyan */
    --primary-color: #008B8B;
    --primary-dark: #006666;
    --primary-light: #20B2AA;
    --primary-bg: rgba(0, 139, 139, 0.1);
    
    /* Secondary/Accent Color: Soft Coral (温かみのある暖色) */
    --accent-color: #FF7F50;
    --accent-dark: #FF6347;
    --accent-light: #FFA07A;
    --accent-bg: rgba(255, 127, 80, 0.1);
    
    /* Neutral/Base Colors: Warm Greys */
    --text-primary: #333333;
    --text-secondary: #4A4A4A;
    --text-muted: #666666;
    --text-light: #999999;
    
    --bg-white: #FFFFFF;
    --bg-ivory: #FFFEF8;
    --bg-warm-grey: #F8F7F4;
    --bg-base: #F5F5F5;
    --bg-base-alt: #FAFAFA;
    
    --border-color: #E0E0E0;
    --border-light: #F0F0F0;
    
    /* Status Colors (優しい表現) */
    --success-color: #4CAF50;
    --success-bg: rgba(76, 175, 80, 0.1);
    --warning-color: #FF9800;
    --warning-bg: rgba(255, 152, 0, 0.1);
    --error-color: #E57373;
    --error-bg: rgba(229, 115, 115, 0.1);
    --info-color: #008B8B;
    --info-bg: rgba(0, 139, 139, 0.1);
    
    /* ===== Typography ===== */
    --font-family-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    --font-family-number: 'Inter', 'DIN', -apple-system, BlinkMacSystemFont, 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.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    
    --line-height-tight: 1.4;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ===== Spacing ===== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    
    /* ===== Border Radius ===== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* ===== Shadows ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-soft: 0 2px 8px rgba(0, 139, 139, 0.08);
    
    /* ===== Transitions ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ===== Animation Easing (Organic & Fluid) ===== */
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1); /* iOS風の滑らかな動き */
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* バネのような動き */
    --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); /* 軽いバウンス */
    --ease-smooth-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 自然な減速 */
    
    /* ===== Animation Durations ===== */
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --duration-slow: 0.5s;
    --duration-slower: 0.8s;
    
    /* ===== Gradient Patterns ===== */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--accent-light));
    --gradient-warm: linear-gradient(135deg, #FF7F50, #FFA07A, #FFB6C1);
    --gradient-cool: linear-gradient(135deg, var(--primary-color), #20B2AA, #48D1CC);
    --gradient-sunset: linear-gradient(135deg, #FF6B6B, #FF7F50, #FFA07A);
    --gradient-ocean: linear-gradient(135deg, #008B8B 0%, #20B2AA 25%, #48D1CC 50%, #5F9EA0 75%, #008B8B 100%);
}

/* ===== Base Styles ===== */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    color: var(--text-primary);
    line-height: var(--line-height-base);
    background-color: var(--bg-warm-grey);
}

/* ===== Utility Classes ===== */
.text-primary { color: var(--primary-color); }
.text-accent { color: var(--accent-color); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-error { color: var(--error-color); }
.text-muted { color: var(--text-muted); }

.bg-primary { background-color: var(--primary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-success { background-color: var(--success-bg); }
.bg-warning { background-color: var(--warning-bg); }
.bg-error { background-color: var(--error-bg); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-soft { box-shadow: var(--shadow-soft); }