﻿/* FanWorx Variables and Themes */
/* Part of unified theme system - Contains all CSS custom properties */

/* ============================================
   FANWORX VARIABLES - CSS Custom Properties
   ============================================ */

:root {
    /* CORE COLORS - Dark Theme (Default) */
    --color-background: black; /* Site background */
    --color-structural: #222222; /* Nav, sections, containers */
    --color-content: #333; /* ALL cards and text surfaces */
    --color-content-accent: #3d3d3d; /* Slightly lighter than #333 content */
    --color-text: white; /* ALL text */
    --color-text-accent: #4a9eff; /* Lighter blue for dark theme */
    --color-navbar-text: white; /* Navbar text */
    /* SPECIAL CASES - Badges & Buttons */
    --color-button-primary: #0066cc; /* Blue for all buttons in dark/light */
    --color-button-accent: #0066cc; /* Same blue */
    --color-button-text: white; /* Text on buttons */
    --color-badge-topic: #0066cc; /* Blue for topics */
    --color-badge-reply: #0066cc80; /* Faded blue (50% opacity) */
    --color-badge-text: white; /* Text on badges */
    /* ACCENTS for organization */
    --color-accent-divider: #3b3b3b;
    --color-accent-muted: #666666; /* Backdrop element - not for text */
    /* SHADOWS */
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    --color-shadow-medium: rgba(0, 0, 0, 0.2);
    --color-shadow-dark: rgba(0, 0, 0, 0.3);
}

/* LIGHT THEME */
[data-theme="light"] {
    --color-background: #f0f0f0;
    --color-structural: #d0d0d0;
    --color-content: #ffffff; /* White cards on light bg */
    --color-content-accent: #f5f5f5; /* Very light gray */
    --color-text: #2a2a2a;
    --color-text-accent: #0052a3; /* Darker blue for light theme */
    --color-navbar-text: #2a2a2a; /* Dark text on light structural */
    --color-button-primary: #0066cc; /* Blue for all buttons */
    --color-button-accent: #0066cc; /* Same blue */
    --color-button-text: white; /* Text on buttons */
    --color-badge-topic: #0066cc; /* Blue for topics */
    --color-badge-reply: #0066cc80; /* Faded blue (50% opacity) */
    --color-badge-text: white; /* Text on badges */

    --color-accent-divider: #e0e0e0;
    --color-accent-muted: #888888; /* Backdrop element - not for text */
    /* SHADOWS */
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    --color-shadow-medium: rgba(0, 0, 0, 0.2);
    --color-shadow-dark: rgba(0, 0, 0, 0.3);
}

/* CLASSIC THEME - DeviantArt correct colors */
[data-theme="classic"] {
    --color-background: #3D4E42; /* Dark green background */
    --color-structural: #7E907F; /* Gray-green board */
    --color-content: #DBE3D6; /* Light green cards */
    --color-content-accent: #cdd6c8; /* Slightly darker than light green content */
    --color-text: #2c2416; /* Dark text on light cards */
    --color-text-accent: #3d8c5a; /* Darker green */
    --color-navbar-text: #DBE3D6; /* Light text on gray-green structural */

    --color-button-primary: #5EAC74; /* Green for all buttons */
    --color-button-accent: #5EAC74; /* Same green */
    --color-button-text: white; /* Text on buttons */
    --color-badge-topic: #5EAC74; /* Green for topics */
    --color-badge-reply: #5EAC7480; /* Faded green (50% opacity) */
    --color-badge-text: white; /* Text on badges */

    --color-accent-divider: #C4CFC1; /* Shaded color for dividers */
    --color-accent-muted: #6b7565; /* Backdrop element - not for text */
    /* SHADOWS */
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    --color-shadow-medium: rgba(0, 0, 0, 0.2);
    --color-shadow-dark: rgba(0, 0, 0, 0.3);
}

/* COFFEE THEME - Your Color Palette */
[data-theme="coffee"] {
    --color-background: #2c1810; /* Dark coffee background */
    --color-structural: #a68a6e; /* Brown structural */
    --color-content: #f5e1c1; /* Light cream cards */
    --color-content-accent: #e8d4b0; /* Slightly darker cream */
    --color-text: #2c2416; /* Dark text on light cards */
    --color-text-accent: #8b6914; /* Darker brown/gold */
    --color-navbar-text: #f5e1c1; /* Light text on brown structural */

    --color-button-primary: #d1b38e; /* Light brown for buttons */
    --color-button-accent: #d1b38e; /* Same light brown */
    --color-button-text: #2c2416; /* Dark text on light buttons */
    --color-badge-topic: #d1b38e; /* Light brown for topics */
    --color-badge-reply: #e4c9a1; /* Lighter brown for replies */
    --color-badge-text: #2c2416; /* Dark text on badges */

    --color-accent-divider: #d1b38e; /* Light brown for dividers */
    --color-accent-muted: #8b7355; /* Backdrop element - not for text */
    /* SHADOWS */
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    --color-shadow-medium: rgba(0, 0, 0, 0.2);
    --color-shadow-dark: rgba(0, 0, 0, 0.3);
}

/* NAVY THEME - Professional Dark Blue */
[data-theme="navy"] {
    --color-background: #172052; /* Darkest */
    --color-structural: #1E2B67; /* Second darkest */
    --color-content: #253A7A; /* Middle */
    --color-content-accent: #2e4589; /* Slightly lighter than middle blue */
    --color-text: #A3C0E4; /* Lightest */
    --color-navbar-text: #A3C0E4;
    --color-text-accent: #5a9fd4; /* Lighter blue */
    --color-button-primary: #3E76BB; /* Second lightest for buttons */
    --color-button-accent: #3E76BB;
    --color-button-text: #ffffff;
    --color-badge-topic: #3E76BB;
    --color-badge-reply: #3E76BB80;
    --color-badge-text: #ffffff;
    --color-accent-divider: #2A4B8D; /* Third lightest for dividers */
    --color-accent-muted: #2A4B8D; /* Backdrop element - not for text */
    /* SHADOWS */
    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-medium: rgba(0, 0, 0, 0.3);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);
}

/* DISCORD THEME - Creative Dark Purple */
[data-theme="disco"] {
    --color-background: #3e3947; /* Discord's dark gray background */
    --color-structural: #37313e; /* Discord's darker sidebar color */
    --color-content: #484453; /* Discord's message area color */
    --color-content-accent: #53505f; /* Slightly lighter gray-purple */
    --color-text: #dcddde; /* Discord's light text */
    --color-navbar-text: #dcddde;
    --color-text-accent: #7289da; /* Discord lighter blurple */
    --color-button-primary: #5865f2; /* Discord's signature blurple */
    --color-button-accent: #5865f2;
    --color-button-text: #ffffff;
    --color-badge-topic: #5865f2;
    --color-badge-reply: #7289da; /* Lighter blurple for replies */
    --color-badge-text: #ffffff;
    --color-accent-divider: #575464;
    --color-accent-muted: #c1bbc6;
    /* SHADOWS */
    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-medium: rgba(0, 0, 0, 0.3);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);
}
