﻿:root[data-theme="srovnejto"] {
    --background-gradient-from: #00A9E0;
    --background-gradient-to: #00D3FF;
    --card-background: #ffffff;
    --text-primary: #1E2A78;
    --text-secondary: #4B5563;
    --input-border: #E5E7EB;
    --input-focus: #00A9E0;
    --button-background: #FF6F00;
    --button-hover: #FF8F00;
    --link-color: #00A9E0;
    --link-hover: #00D3FF;

    /* Main layout colors */
    --sidebar-bg: #00A9E0;
    --sidebar-text: #ffffff;
    --main-bg: #f9fafb;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --border-color: #e5e7eb;
    --hover-bg: rgba(255, 255, 255, 0.2);
    --input-bg: #ffffff;
}

/* Klikejto theme */
:root[data-theme="klikejto"] {
    --background-gradient-from: #E6007E;
    --background-gradient-to: #00D3FF;
    --card-background: #ffffff;
    --text-primary: #2D004B;
    --text-secondary: #666666;
    --input-border: #E5E7EB;
    --input-focus: #E6007E;
    --button-background: #E6007E;
    --button-hover: #ff1a94;
    --link-color: #E6007E;
    --link-hover: #ff1a94;

    /* Main layout colors */
    --sidebar-bg: #E6007E;
    --sidebar-text: #ffffff;
    --main-bg: #f9fafb;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --border-color: #e5e7eb;
    --hover-bg: rgba(255, 255, 255, 0.2);
    --input-bg: #ffffff;
}

/* Dark theme */
:root[data-theme="dark"] {
    --background-gradient-from: #1a1a2e;
    --background-gradient-to: #16213e;
    --card-background: #1f2937;
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --input-border: #4b5563;
    --input-focus: #60a5fa;
    --button-background: #3b82f6;
    --button-hover: #2563eb;
    --link-color: #60a5fa;
    --link-hover: #93c5fd;

    /* Main layout colors */
    --sidebar-bg: #111827;
    --sidebar-text: #f9fafb;
    --main-bg: #0f172a;
    --header-bg: #1f2937;
    --card-bg: #1f2937;
    --border-color: #374151;
    --hover-bg: rgba(255, 255, 255, 0.1);
    --input-bg: #374151;
}

/* Optional: Add smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}