/* ====================
   Typography Design - Color Variables
   Consistent color system for all pages
   ==================== */

:root {
    /* Primary Colors */
    --primary: #3366ff;
    --primary-dark: #2952cc;
    --primary-light: #668cff;
    --primary-rgb: 51, 102, 255;
    
    /* Secondary Colors */
    --secondary: #ff3366;
    --secondary-dark: #cc2952;
    --secondary-light: #ff668c;
    --secondary-rgb: 255, 51, 102;
    
    /* Accent Colors */
    --accent: #8D192B;
    --accent-light: #d3536b;
    --accent-dark: #6b1221;
    --accent-rgb: 141, 25, 43;
    
    /* Neutral Colors */
    --dark: #333333;
    --medium-dark: #666666;
    --medium: #999999;
    --medium-light: #cccccc;
    --light: #eeeeee;
    --lighter: #f8f8f8;
    --white: #ffffff;
    
    /* Semantic Colors */
    --success: #4caf50;
    --warning: #ffa000;
    --error: #f44336;
    --info: #2196f3;
    
    /* Background Colors */
    --bg-main: var(--white);
    --bg-darker: var(--lighter);
    --bg-body: #f5f5f5;
    --bg-card: var(--white);
    --bg-header: var(--white);
    --bg-footer: var(--lighter);
    
    /* Text Colors */
    --text-dark: var(--dark);
    --text-medium: var(--medium-dark);
    --text-light: var(--medium);
    --text-white: var(--white);
    
    /* Border Colors */
    --border-light: var(--light);
    --border-medium: var(--medium-light);
    
    /* Shadow */
    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 8px 25px rgba(0, 0, 0, 0.15);
    
    /* Design-specific Colors */
    --chinese-ink: var(--accent);
    --japanese-sakura: #FFB7C5;
    --special-neon: #39FF14;
    --modern-gradient-start: #6e8efb;
    --modern-gradient-end: #a777e3;
}