/* =================================
   Theme Variables
   ================================= */

:root {
    /* Colors */
    --color-primary: #007071;
    --color-primary-dark: #005455;
    --color-secondary: #4CAF50;
    --color-secondary-dark: #45a049;
    --color-accent: #ff6600;
    --color-accent-dark: #e55a00;
    --color-text: #333;
    --color-text-light: #666;
    --color-text-lighter: #999;
    --color-text-muted: #ccc;
    --color-background: #f5f5f5;
    --color-background-light: #f8f9fa;
    --color-background-lighter: #f9f9f9;
    --color-background-accent: #f0f8ff;
    --color-background-secondary: #e8f5e8;
    --color-white: #fff;
    --color-white-alpha-10: rgba(255,255,255,0.1);
    --color-white-alpha-20: rgba(255,255,255,0.2);
    --color-white-alpha-30: rgba(255,255,255,0.3);
    --color-white-alpha-90: rgba(255, 255, 255, 0.9);
    --color-border: #e5e5e5;
    --color-border-light: #e9ecef;
    --color-border-lighter: #eee;
    --color-border-lightest: #ddd;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-light: rgba(0, 0, 0, 0.08);
    --color-shadow-lighter: rgba(0, 0, 0, 0.05);
    --color-shadow-dark: rgba(0, 0, 0, 0.15);
    --color-shadow-darker: rgba(0, 0, 0, 0.2);
    --color-twitter: #1DA1F2;
    --color-twitter-hover: #1a8cd8;
    --color-facebook: #1877F2;
    --color-facebook-hover: #166FE5;
    --color-primary-alpha-80: rgba(0, 112, 113, 0.8);
    --color-primary-shadow: rgba(0,112,113,0.3);
    --color-primary-shadow-dark: rgba(0,112,113,0.4);
    --color-accent-shadow: rgba(255,102,0,0.3);
    --color-accent-shadow-dark: rgba(255,102,0,0.4);
    --color-secondary-shadow: rgba(76,175,80,0.3);
    --color-secondary-shadow-dark: rgba(76,175,80,0.4);
    --color-info-bg: #f0f8ff;
    --color-info-border: #b3d9ff;
    --color-focus-shadow: rgba(0, 123, 255, 0.1);
    --color-focus-shadow-dark: rgba(0, 123, 255, 0.15);
    --color-focus-bg: rgba(0, 123, 255, 0.04);
    --color-success: #28a745;
    --color-dark: #333;
    --color-gray-light: #555;

    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-size-base: 14px;
    --font-size-large: 18px;
    --font-size-small: 12px;
    --line-height-base: 1.6;

    /* Layout */
    --container-width: 1200px;
    --container-padding: 16px;
    --border-radius: 8px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --box-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 40px;
}