/* 
 * Theme CSS - Centralized color scheme for Events App
 * Contains CSS variables for light and dark mode
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Jura:wght@300;400;500;700&family=Audiowide&family=Shippori+Antique&family=Shippori+Mincho:wght@400;500;700&display=swap');

:root {
    /* Enable system color scheme support */
    color-scheme: light dark;
    
    /* Font families */
    --font-title-en: 'Orbitron', sans-serif;
    --font-body-en: 'Jura', sans-serif;
    --font-special-en: 'Audiowide', cursive;
    --font-title-jp: 'Shippori Antique', sans-serif;
    --font-body-jp: 'Shippori Mincho', serif;
    --font-special-jp: 'Shin Gothic', sans-serif;
    
    /* Default font settings */
    --font-title: var(--font-title-en);
    --font-body: var(--font-body-en);
    --font-special: var(--font-special-en);
    
    /* Japanese-inspired colors */
    
    --indigo-blue: #183a5b;
    --aqua-blue: #00FFFF;
    --blue-green: #00FF00;
    --rice-white: #ffffff;
    --sumi-black: #1A1A1A;
    --dark-grey: #4D4D4D;
    --light-grey: #D9D9D9;
    --red: #FF0000;

    /* DREAD Theme colors using light-dark() function */
    --background-color: light-dark(#F7F7F7, #252525); /* Soft off-white / charcoal grey */
    --color-primary: light-dark(#2A91D0, #479ed3); /* Teal / Lighter Teal */
    --color-primary-light: light-dark(#31a8f1, #52b6f3); 
    --color-secondary: light-dark(#B53629, #ff5e4d); /* Reddish-Orange / Lighter Reddish-Orange */
    --color-secondary-light: light-dark(#d95345, #f97d71); 
    --color-quaternary: light-dark(#E0E0E0, #E0E0E0); /* Gray/White Undersuit */
    --color-light-grey: light-dark(#cfcfcf, #3a3a3a); /* Gray/White Undersuit / Dark grey */
    --color-dark-grey: light-dark(#2A2A2A, #4D4D4D); /* Dark gray text / Darker gray */
    
    --color-alert: light-dark(#D32F2F, #FF4500); /* Standard Red Alerts */

    /* Additional derived colors using light-dark() */
    --text-color: light-dark(#1a1a1a, #f5f5f5);
    --text-color-light: light-dark(#4D586E, #d5d5d5);
    --border-color: light-dark(#E0E0E0, #2A2A2A);
    --card-background: light-dark(#FFFFFF, #212121);
    --input-background: light-dark(#fdfdfd, #2a2a2a);
    --hover-color: light-dark(rgba(42, 145, 208, 0.1), rgba(74, 217, 255, 0.1));
    --shadow-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
    
    /* ORIGINAL Theme colors using light-dark() function 
    --background-color: light-dark(#ffffff, #1e1e1e);
    --color-primary: light-dark(#f37964, #ff8a76);      
    --color-secondary: light-dark(#1e2430, #2a3446);    
    --color-secondary-light: light-dark(#4d586e, #5d6b88);     
    --color-quaternary: light-dark(#242a38, #303950);   
    --color-light-grey: light-dark(#d6d6d6, #3a3a3a);   
    --color-dark-grey: light-dark(#2a2a2a, #4d4d4d);    
    --color-primary-light: light-dark(#f7ada0, #ff9d8b);  
    --color-alert: light-dark(#f83917, #ff4f33);        
    
    
    --text-color: light-dark(#1e2430, #e0e0e0);
    --text-color-light: light-dark(#4d586e, #b0b0b0);
    --border-color: light-dark(#e0e0e0, #2a2a2a);
    --card-background: light-dark(#ffffff, #1e1e1e);
    --input-background: light-dark(#f5f5f5, #2a2a2a);
    --hover-color: light-dark(#f5f5f5, #2a2a2a);
    --shadow-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));*/
    
    /* Button specific colors */
    --button-text-color: white; /* Always white regardless of theme */
    
    /* Navigation specific colors */
    --navbar-background: light-dark(#2a2a2a, #1a1a1a); /* Dark navbar in both themes, slightly darker in dark mode */
}

/* Apply theme colors to basic elements */
body {
    background-color: var(--background-color); /* Use theme background color */
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Ensure full page height */
}

/* Apply fonts to different elements */
h1, h2, h3, h4, h5, h6, .title, .nav-logo, .category-title {
    font-family: var(--font-title);
}

p, div, input, a, li {
    font-family: var(--font-body);
}

.special-text, .theme-switch-wrapper, .featured-badge, .event-price {
    font-family: var(--font-special);
}

/* For Japanese language support */
[lang="ja"] h1, [lang="ja"] h2, [lang="ja"] h3, 
[lang="ja"] h4, [lang="ja"] h5, [lang="ja"] h6, 
[lang="ja"] .title, [lang="ja"] .nav-logo, 
[lang="ja"] .category-title {
    font-family: var(--font-title-jp);
}

[lang="ja"] p, [lang="ja"] span, 
[lang="ja"] div, [lang="ja"] input, [lang="ja"] button, 
[lang="ja"] a, [lang="ja"] li {
    font-family: var(--font-body-jp);
}

[lang="ja"] .special-text, [lang="ja"] .theme-switch-wrapper, 
[lang="ja"] .featured-badge, [lang="ja"] .event-price {
    font-family: var(--font-special-jp);
}

/* Theme toggle switch styling */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.theme-switch {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 30px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-secondary-light);
    transition: .4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--color-secondary);
}

input:checked + .slider:before {
    transform: translateX(30px);
}

.theme-switch-wrapper .theme-icon {
    margin: 0 5px;
    font-size: 18px;
}

/* Smooth transition for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}