/* ========================================
   ReadAgora - Comprehensive Color Theme System
   All colors used across the website organized by category
   ======================================== */

/* ============================================
   1. CORE THEME COLORS (CSS Variables)
   ============================================ */

:root {
  /* === Primary Background Colors === */
  --bg-primary: #0f0f0f;           /* Main background */
  --bg-secondary: #1a1a1a;         /* Secondary background (cards, sections) */
  --bg-tertiary: #222;             /* Tertiary background (buttons, inputs) */
  --bg-quaternary: #111;           /* Header/footer background */
  --bg-hover: #2a2a2a;             /* Hover state background */
  --bg-darker: #242424;            /* Darker background variant */
  --bg-dark: #333;                 /* Dark background for emphasis */
  --bg-medium: #444;               /* Medium dark background */
  
  /* === Text Colors === */
  --text-primary: #fff;            /* Primary text (white) */
  --text-secondary: #ccc;          /* Secondary text (light gray) */
  --text-tertiary: #aaa;           /* Tertiary text (medium gray) */
  --text-quaternary: #bbb;         /* Quaternary text */
  --text-muted: #666;              /* Muted text */
  --text-subtle: #888;             /* Subtle text */
  --text-disabled: #555;           /* Disabled text */
  --text-placeholder: #444;        /* Placeholder text */
  --text-light: #ddd;             /* Light text */
  --text-medium: #777;             /* Medium text */
  --text-dark: #e0e0e0;            /* Dark text on light bg */
  --text-white: #ffffff;           /* Pure white text (buttons, high contrast) */
  --text-on-accent: #ffffff;       /* Text on accent backgrounds */
  
  /* === Accent Colors (Default: Orange) === */
  --accent-primary: #ff6a00;       /* Primary accent color */
  --accent-secondary: #ff8c42;     /* Secondary accent color */
  --accent-hover: #e55f00;         /* Accent hover state */
  --accent-alt: #ff8c42;           /* Alt accent (buttons, links hover) */
  
  /* === Border Colors === */
  --border-color: #222;            /* Primary border color */
  --border-color-light: #333;      /* Light border color */
  --border-color-lighter: #444;    /* Lighter border color */
  --border-color-dark: #e0e0e0;    /* Dark border (for light mode) */
  --border-color-medium: #d0d0d0;  /* Medium border (for light mode) */
  
  /* === Status Colors === */
  --success-color: #4caf50;        /* Success/positive */
  --success-light: #66bb6a;        /* Light success */
  --success-dark: #1b5e20;         /* Dark success */
  --success-bg: #a5d6a7;           /* Success background text */
  
  --error-color: #ff4444;          /* Error/negative */
  --error-dark: #f44336;           /* Dark error */
  --error-darker: #e57373;         /* Darker error */
  --error-darkest: #c62828;        /* Darkest error */
  --error-critical: #b71c1c;       /* Critical error */
  --error-danger: #ff5252;         /* Danger state */
  
  --warning-color: #ff9800;        /* Warning */
  --warning-light: #ffb74d;        /* Light warning */
  --warning-dark: #ff6f00;         /* Dark warning */
  --warning-bg: #ffcc80;           /* Warning background text */
  
  /* === Neutral Colors === */
  --neutral-gray: #424242;         /* Neutral gray */
  --neutral-gray-text: #bdbdbd;    /* Neutral gray text */
  
  /* === Shadow Colors === */
  --shadow-light: rgba(0, 0, 0, 0.1);     /* Light shadow */
  --shadow-medium: rgba(0, 0, 0, 0.2);    /* Medium shadow */
  --shadow-dark: rgba(0, 0, 0, 0.3);      /* Dark shadow */
  --shadow-heavy: rgba(0, 0, 0, 0.4);     /* Heavy shadow */
  --shadow-deep: rgba(0, 0, 0, 0.5);      /* Deep shadow */
  --shadow-overlay: rgba(0, 0, 0, 0.7);   /* Overlay shadow */
  --shadow-modal: rgba(0, 0, 0, 0.9);     /* Modal background */
  --shadow-accent: rgba(255, 106, 0, 0.4); /* Accent glow shadow */
  
  /* === Overlay Colors === */
  --overlay-light: rgba(0, 0, 0, 0.3);    /* Light overlay */
  --overlay-medium: rgba(0, 0, 0, 0.5);   /* Medium overlay */
  --overlay-dark: rgba(0, 0, 0, 0.7);     /* Dark overlay */
  --overlay-darker: rgba(0, 0, 0, 0.9);   /* Darker overlay */
  
  /* === Transparent Accent Colors === */
  --accent-transparent-light: rgba(255, 106, 0, 0.05);  /* Very light accent tint */
  --accent-transparent-medium: rgba(255, 106, 0, 0.1);  /* Light accent tint */
  --accent-transparent: rgba(255, 106, 0, 0.2);         /* Medium accent tint */
  --accent-transparent-strong: rgba(255, 106, 0, 0.3);  /* Strong accent tint */
}

/* ============================================
   2. LIGHT MODE OVERRIDES
   ============================================ */

body.light-mode,
html.light-mode {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #eeeeee;
  --bg-quaternary: #fafafa;
  --bg-hover: #e8e8e8;
  --bg-darker: #e0e0e0;
  --bg-dark: #d5d5d5;
  --bg-medium: #cccccc;
  
  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #333333;
  --text-tertiary: #555555;
  --text-quaternary: #444444;
  --text-muted: #888888;
  --text-subtle: #666666;
  --text-disabled: #aaaaaa;
  --text-placeholder: #999999;
  --text-light: #2a2a2a;
  --text-medium: #777777;
  --text-dark: #1a1a1a;
  --text-white: #ffffff;
  --text-on-accent: #222222;
  
  /* Border Colors */
  --border-color: #e0e0e0;
  --border-color-light: #d0d0d0;
  --border-color-lighter: #c0c0c0;
  --border-color-dark: #333333;
  --border-color-medium: #555555;
  
  /* Shadow Colors - lighter for light mode */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.15);
  --shadow-heavy: rgba(0, 0, 0, 0.2);
  --shadow-deep: rgba(0, 0, 0, 0.25);
  --shadow-overlay: rgba(0, 0, 0, 0.4);
  --shadow-modal: rgba(0, 0, 0, 0.6);
  
  /* Overlay Colors */
  --overlay-light: rgba(0, 0, 0, 0.1);
  --overlay-medium: rgba(0, 0, 0, 0.2);
  --overlay-dark: rgba(0, 0, 0, 0.3);
  --overlay-darker: rgba(0, 0, 0, 0.5);
}

/* ============================================
   3. THEME COLOR PALETTES
   ============================================ */

/* === Orange Theme (Default) === */
.theme-orange {
  --accent-primary: #ff6a00;
  --accent-secondary: #ff8c42;
  --accent-hover: #e55f00;
  --accent-alt: #ff8c42;
}

/* === Blue Theme === */
.theme-blue {
  --accent-primary: #2196f3;
  --accent-secondary: #42a5f5;
  --accent-hover: #1976d2;
  --accent-alt: #42a5f5;
}

/* === Purple Theme === */
.theme-purple {
  --accent-primary: #9c27b0;
  --accent-secondary: #ba68c8;
  --accent-hover: #7b1fa2;
  --accent-alt: #ba68c8;
}

/* === Deep Purple Theme === */
.theme-deep-purple {
  --accent-primary: #673ab7;
  --accent-secondary: #9575cd;
  --accent-hover: #512da8;
  --accent-alt: #9575cd;
}

/* === Green Theme === */
.theme-green {
  --accent-primary: #4caf50;
  --accent-secondary: #66bb6a;
  --accent-hover: #388e3c;
  --accent-alt: #66bb6a;
}

/* === Red Theme === */
.theme-red {
  --accent-primary: #f44336;
  --accent-secondary: #e57373;
  --accent-hover: #d32f2f;
  --accent-alt: #e57373;
}

/* === Pink Theme === */
.theme-pink {
  --accent-primary: #e91e63;
  --accent-secondary: #f06292;
  --accent-hover: #c2185b;
  --accent-alt: #f06292;
}

/* === Teal Theme === */
.theme-teal {
  --accent-primary: #009688;
  --accent-secondary: #4db6ac;
  --accent-hover: #00796b;
  --accent-alt: #4db6ac;
}

/* === Cyan Theme === */
.theme-cyan {
  --accent-primary: #00bcd4;
  --accent-secondary: #4dd0e1;
  --accent-hover: #0097a7;
  --accent-alt: #4dd0e1;
}

/* === Amber Theme === */
.theme-amber {
  --accent-primary: #ff9800;
  --accent-secondary: #ffb74d;
  --accent-hover: #f57c00;
  --accent-alt: #ffb74d;
}

/* === ReadAgora Icon Theme === */
.theme-raicon {
  --accent-primary: #36382b;
  --accent-secondary: #4a4d3d;
  --accent-hover: #2d3026;
  --accent-alt: #4a4d3d;
}

/* ============================================
   4. GRADIENT COLORS (Decorative)
   ============================================ */

/* === Story Cover Gradients === */
:root {
  /* Romance Gradients */
  --gradient-romance-1: linear-gradient(135deg, #ff6a88 0%, #ff99aa 100%);
  --gradient-romance-2: linear-gradient(135deg, var(--accent-primary) 0%, #ff1744 100%);
  
  /* Fantasy Gradients */
  --gradient-fantasy-1: linear-gradient(135deg, #6a0dad 0%, #9d4edd 100%);
  
  /* Mystery Gradients */
  --gradient-mystery-1: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --gradient-mystery-2: linear-gradient(135deg, #1a1a2e 0%, #2d3561 100%);
  
  /* General Gradients */
  --gradient-gray-1: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --gradient-gray-2: linear-gradient(135deg, #333 0%, #555 100%);
  --gradient-gray-3: linear-gradient(135deg, #333 0%, #444 100%);
  
  /* Profile/Cover Gradients */
  --gradient-profile: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
  --gradient-cover-overlay: linear-gradient(135deg, rgba(255,106,0,0.3) 0%, rgba(51,51,51,0.8) 100%);
}

/* ============================================
   5. UTILITY GRADIENT CLASSES
   ============================================ */

/* Purple Variants */
.gradient-purple {
  background: linear-gradient(135deg, #9c27b0, #ab47bc);
}

.gradient-deep-purple {
  background: linear-gradient(135deg, #673ab7, #9575cd);
}

/* Pink Variants */
.gradient-pink {
  background: linear-gradient(135deg, #e91e63, #f06292);
}

/* Blue Variants */
.gradient-blue {
  background: linear-gradient(135deg, #2196f3, #42a5f5);
}

/* Green Variants */
.gradient-green {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
}

/* Orange Variants */
.gradient-orange {
  background: linear-gradient(135deg, #ff6a00, #ff8c42);
}

/* Amber Variants */
.gradient-amber {
  background: linear-gradient(135deg, #ff9800, #ffb74d);
}

/* Cyan Variants */
.gradient-cyan {
  background: linear-gradient(135deg, #00bcd4, #4dd0e1);
}

/* Red Variants */
.gradient-red {
  background: linear-gradient(135deg, #f44336, #e57373);
}

/* Teal Variants */
.gradient-teal {
  background: linear-gradient(135deg, #009688, #4db6ac);
}

/* ReadAgora Icon (neutral) */
.gradient-raicon {
  background: linear-gradient(135deg, #36382b, #4a4d3d);
}

/* ============================================
   6. TRANSPARENCY & OVERLAY COLORS
   ============================================ */

:root {
  /* Modal & Overlay Backgrounds */
  --overlay-dark: rgba(0, 0, 0, 0.8);
  --overlay-darker: rgba(0, 0, 0, 0.98);
  --overlay-medium: rgba(26, 26, 26, 0.98);
  
  /* Transparent Backgrounds */
  --bg-transparent-white: rgba(255, 255, 255, 0.4);
  --bg-transparent-error: rgba(255, 68, 68, 0.1);
  --bg-transparent-error-90: rgba(255, 68, 68, 0.9);
  --bg-transparent-success: rgba(76, 175, 80, 0.1);
  --bg-transparent-warning: rgba(255, 152, 0, 0.1);
  
  /* Dark Backgrounds with Transparency */
  --bg-dark-error: #2a1a1a;
}

/* ============================================
   7. READER MODE COLORS
   ============================================ */

:root {
  /* Dark Mode (Reading) */
  --reader-bg-dark: #1a1a1a;
  --reader-text-dark: #e0e0e0;
  
  /* Sepia Mode */
  --reader-bg-sepia: #f4ecd8;
  --reader-text-sepia: #5c4a3a;
  
  /* Light Mode (Reading) */
  --reader-bg-light: #ffffff;
  --reader-text-light: #333333;
}

/* ============================================
   8. SHADOW COLORS
   ============================================ */

:root {
  --shadow-default: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-large: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 12px rgba(255, 106, 0, 0.4);
  --shadow-illustration: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   9. SPECIFIC COMPONENT COLORS
   ============================================ */

/* Status Badges */
:root {
  --status-published-bg: #1b5e20;
  --status-published-text: #a5d6a7;
  
  --status-draft-bg: #424242;
  --status-draft-text: #bdbdbd;
  
  --status-ongoing-bg: #ff6f00;
  --status-ongoing-text: #ffcc80;
}

/* Navigation */
:root {
  --nav-bg: #111;
  --nav-border: #222;
  --nav-text: #aaa;
  --nav-text-hover: #ccc;
  --nav-active: var(--accent-primary);
}

/* Forms & Inputs */
:root {
  --input-bg: #1a1a1a;
  --input-border: #333;
  --input-border-focus: var(--accent-primary);
  --input-text: #fff;
  --input-placeholder: #666;
}

/* Buttons */
:root {
  --btn-primary-bg: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  --btn-secondary-bg: #333;
  --btn-secondary-hover: #2a2a2a;
  --btn-danger-bg: #c62828;
  --btn-danger-hover: #b71c1c;
}

/* ============================================
   10. ILLUSTRATION & ICON COLORS
   ============================================ */

:root {
  --illustration-opacity: 0.95;
  --icon-primary: currentColor;
  --icon-accent: var(--accent-primary);
}

/* ============================================
   11. CHART & DATA VISUALIZATION COLORS
   ============================================ */

:root {
  /* Chart Colors */
  --chart-primary: var(--accent-primary);
  --chart-success: #4caf50;
  --chart-danger: #f44336;
  --chart-neutral: #666;
  
  /* Graph Lines */
  --graph-grid: #222;
  --graph-line: var(--accent-primary);
  --graph-area: rgba(255, 106, 0, 0.2);
}

/* ============================================
   12. BRAND COLORS (Fixed)
   These colors are intentional and should NOT be themeable
   ============================================ */

:root {
  --brand-orange: #ff6a00;
  --brand-orange-light: #ff8c42;
  --brand-orange-dark: #e55f00;
}

/* ============================================
   USAGE NOTES:
   
   - Use CSS variables (--var-name) for all themeable colors
   - Use fixed hex values only for brand colors or specific illustrations
   - Light mode is triggered by adding .light-mode class to body
   - Theme switching updates --accent-primary and --accent-secondary
   - All gradients use CSS variables when possible for theming
   - Status colors (success, error, warning) remain consistent across themes
   - Reader mode colors are separate for optimal reading experience
   
   ============================================ */