/**
 * Ratsutamise Päeviku Põhistiilid - TÄIELIK VERSIOON
 * Asukoht: public_html/paavik/assets/css/main.css
 */

/* ================================================================
   CSS RESET & MODERN FOUNDATIONS
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* ============================================================
        COLOR SYSTEM - HSL BASED FOR HEADER/FOOTER
        ============================================================ */
    
    /* Primary color hue (adjust this to change your brand color) */
    --primary-hue: 210;      /* Blue theme - 210° on color wheel (UUENDATUD) */
    --success-hue: 120;      /* Green - 120° on color wheel */
    --warning-hue: 45;       /* Orange/Yellow - 45° on color wheel */
    --danger-hue: 0;         /* Red - 0° on color wheel */
    --gray-hue: 210;         /* Neutral gray with slight blue tint */
    
    /* Primary color variations */
    --primary-color: hsl(var(--primary-hue), 70%, 50%);
    --primary-light: hsl(var(--primary-hue), 65%, 65%);
    --primary-dark: hsl(var(--primary-hue), 75%, 35%);
    
    /* Success colors */
    --success-color: hsl(var(--success-hue), 60%, 45%);
    --success-light: hsl(var(--success-hue), 55%, 60%);
    
    /* Warning colors */
    --warning-color: hsl(var(--warning-hue), 75%, 55%);
    --warning-light: hsl(var(--warning-hue), 70%, 70%);
    
    /* Danger colors */
    --danger-color: hsl(var(--danger-hue), 70%, 50%);
    --danger-light: hsl(var(--danger-hue), 65%, 65%);
    
    /* Gray scale & Semantic Colors */
    --color-text: hsl(var(--gray-hue), 20%, 15%);
    --color-text-subtle: hsl(var(--gray-hue), 15%, 45%);
    --color-text-muted: hsl(var(--gray-hue), 15%, 45%); /* Alias for subtle */
    --color-bg: white;
    --color-bg-subtle: hsl(var(--gray-hue), 25%, 98%);
    --color-bg-muted: hsl(var(--gray-hue), 20%, 96%);
    --color-border: hsl(var(--gray-hue), 15%, 88%);
    --color-border-subtle: hsl(var(--gray-hue), 12%, 94%);

    /* Original Semantic Color Names (mapped to new HSL values) */
    --primary: var(--primary-color);
    --success: var(--success-color);
    --warning: var(--warning-color);
    --error: var(--danger-color);
    
    /* ============================================================
        SPACING SYSTEM - CRITICAL FOR LAYOUT
        ============================================================ */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */

    /* ============================================================
        TYPOGRAPHY SYSTEM
        ============================================================ */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;  /* 36px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ============================================================
        BORDER RADIUS SYSTEM
        ============================================================ */
    --radius-sm: 0.25rem;    /* 4px */
    --radius: 0.375rem;      /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;   /* Fully rounded */

    /* ============================================================
        SHADOW SYSTEM
        ============================================================ */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* UUENDATUD */
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); /* UUENDATUD */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* UUENDATUD */
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ============================================================
        TRANSITION SYSTEM
        ============================================================ */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.2s ease-out;
    --transition-slow: 0.3s ease-out;

    /* ============================================================
        Z-INDEX SCALE
        ============================================================ */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* ============================================================
        CONTAINER & LAYOUT
        ============================================================ */
    --container-max-width: 1200px;
    --container-padding: var(--space-4);
    
    @media (min-width: 640px) {
        --container-padding: var(--space-6);
    }
    
    @media (min-width: 1024px) {
        --container-padding: var(--space-8);
    }
    
    /* ============================================================
       LEGACY SUPPORT - for old styles
       ============================================================ */
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-subtle);
    --bg-primary: var(--color-bg);
    --bg-secondary: var(--color-bg-subtle);
    --border-light: var(--color-border);

    /* ============================================================
       MOBILE NAVIGATION & ACTION BAR CUSTOM PROPERTIES [UUS]
       ============================================================ */
    /* Action Bar Colors */
    --mobile-action-bar-bg: #ffffff;
    --mobile-action-bar-border: #e1e5e9;
    --mobile-action-bar-shadow: rgba(0, 0, 0, 0.08);
    
    /* Action Colors */
    --mobile-action-color: #64748b;
    --mobile-action-color-hover: #334155;
    --mobile-action-color-active: #2563eb;
    --mobile-action-bg-hover: #f1f5f9;
    --mobile-action-bg-active: #eff6ff;
    
    /* Featured Action Colors */
    --mobile-action-featured-bg: #2563eb;
    --mobile-action-featured-bg-hover: #1d4ed8;
    --mobile-action-featured-shadow: rgba(37, 99, 235, 0.3);
    
    /* Navigation Colors */
    --mobile-nav-overlay-bg: rgba(0, 0, 0, 0.5);
    --mobile-nav-content-bg: #ffffff;
    --mobile-nav-item-color: #374151;
    --mobile-nav-item-color-hover: #2563eb;
    --mobile-nav-item-bg-hover: #eff6ff;
}

/* ================================================================
   BASE STYLES
   ================================================================ */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                 sans-serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg-subtle);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Logged in state */
body.logged-in {
    /* Add any styles specific to logged-in users */
}

/* ================================================================
   MOBILE NAVIGATION UTILITIES [UUS]
   ================================================================ */
/* Prevent body scroll when mobile nav is open */
.mobile-nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Hide elements only on mobile when navigation is open */
.mobile-nav-open .hide-when-nav-open {
    display: none !important;
}

/* Show elements only when mobile navigation is open */
.show-when-nav-open {
    display: none;
}

.mobile-nav-open .show-when-nav-open {
    display: block;
}

/* ================================================================
   ACCESSIBILITY & RESETS
   ================================================================ */
/* SCREEN READER UTILITY */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* FOCUS STYLES */
*:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
*:focus:not(:focus-visible) {
    outline: none;
}
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* BUTTON RESET */
button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* LINK STYLES */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}

/* FORM ELEMENT FONT RESET */
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ================================================================
   LAYOUT SYSTEM
   ================================================================ */
.page-wrapper {
    min-height: calc(100vh - 160px); /* Adjust based on header/footer height */
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.main {
    flex: 1;
    padding: var(--space-6) 0;
}

/* ================================================================
   MODERN HEADER & NAVIGATION
   ================================================================ */
.header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
    gap: var(--space-4);
}

.nav-brand {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.nav-brand:hover {
    opacity: 0.8;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.nav-link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-subtle);
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-link:hover {
    background: var(--color-bg-muted);
    color: var(--color-text);
}

.nav-link.active {
    background: var(--primary);
    color: white;
}

.nav-link.primary {
    background: var(--primary);
    color: white;
}

.nav-link.primary:hover {
    background: var(--primary-dark);
}

/* User Menu */
.nav-user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-border);
}

.nav-user-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    display: none;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: var(--space-1);
}

.lang-link {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.lang-link:hover {
    background: var(--color-bg-muted);
    color: var(--color-text);
}

.lang-link.active {
    background: var(--color-bg-muted);
    color: var(--primary);
}

/* ================================================================
   MODERN BUTTON SYSTEM
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    min-height: 2.5rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button Variants */
.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--color-bg-muted);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: hsl(var(--success-hue), 65%, 35%);
}

.btn-warning {
    background: var(--warning);
    color: white;
}

.btn-warning:hover:not(:disabled) {
    background: hsl(var(--warning-hue), 80%, 45%);
}

.btn-danger {
    background: var(--error);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: hsl(var(--danger-hue), 75%, 40%);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    min-height: 2rem;
}

.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-base);
    min-height: 3rem;
}

/* ================================================================
   FORM ELEMENTS
   ================================================================ */
.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.form-label.required::after {
    content: ' *';
    color: var(--error);
}

.form-input,
.form-textarea,
.form-select {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px hsla(var(--primary-hue), 70%, 50%, 0.1);
}

.form-input.error,
.form-textarea.error,
.form-select.error {
    border-color: var(--error);
}

.form-error {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--error);
}

.form-help {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
}

/* ================================================================
   ALERTS & MESSAGES
   ================================================================ */
.alert {
    padding: var(--space-4);
    border-radius: var(--radius);
    margin-bottom: var(--space-6);
    border: 1px solid transparent;
}

.alert-success {
    background-color: hsl(var(--success-hue), 70%, 96%);
    border-color: hsl(var(--success-hue), 60%, 88%);
    color: hsl(var(--success-hue), 80%, 20%);
}

.alert-warning {
    background-color: hsl(var(--warning-hue), 80%, 96%);
    border-color: hsl(var(--warning-hue), 75%, 85%);
    color: hsl(var(--warning-hue), 85%, 25%);
}

.alert-error {
    background-color: hsl(var(--danger-hue), 80%, 97%);
    border-color: hsl(var(--danger-hue), 70%, 90%);
    color: hsl(var(--danger-hue), 80%, 30%);
}

.alert-info {
    background-color: hsl(var(--primary-hue), 75%, 97%);
    border-color: hsl(var(--primary-hue), 70%, 90%);
    color: hsl(var(--primary-hue), 75%, 30%);
}

/* ================================================================
   CARDS & SURFACES
   ================================================================ */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.card-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
    margin: var(--space-1) 0 0 0;
}

/* ================================================================
   UTILITIES
   ================================================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-muted { color: var(--color-text-muted); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

/* ================================================================
   MOBILE SPECIFIC STYLES & UTILITIES [UUS]
   ================================================================ */

/* ACTION BAR VISIBILITY CONTROLS */
/* Hide action bar on specific pages */
.hide-mobile-action-bar .mobile-action-bar {
    display: none !important;
}

/* Adjust body padding when action bar is hidden */
.hide-mobile-action-bar body.logged-in {
    padding-bottom: 0 !important;
}

/* Action bar slide animations */
.mobile-action-bar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-action-bar.hidden {
    transform: translateY(100%);
}

/* RESPONSIVE HELPERS */
/* Show only on mobile */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* Hide only on mobile */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

/* ACTION BAR THEMES */
/* Dark theme action bar */
.mobile-action-bar.theme-dark {
    background: #1e293b;
    border-top-color: #334155;
}

.theme-dark .mobile-action {
    color: #94a3b8;
}

.theme-dark .mobile-action:hover {
    background: #334155;
    color: #e2e8f0;
}

.theme-dark .mobile-action.active {
    color: #60a5fa;
    background: #1e40af;
}

/* Transparent action bar (for special pages) */
.mobile-action-bar.theme-transparent {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ACTION BAR SIZES */
/* Compact action bar */
.mobile-action-bar.size-compact {
    height: 60px;
}

.size-compact .mobile-action {
    height: 44px;
    font-size: 10px;
}

.size-compact .action-icon {
    width: 20px;
    height: 20px;
}

.size-compact .mobile-action.featured {
    width: 48px;
    height: 48px;
    min-width: 48px;
}

/* Large action bar */
.mobile-action-bar.size-large {
    height: 80px;
}

.size-large .mobile-action {
    height: 64px;
    font-size: 12px;
}

.size-large .action-icon {
    width: 28px;
    height: 28px;
}

.size-large .mobile-action.featured {
    width: 64px;
    height: 64px;
    min-width: 64px;
}

/* ================================================================
   RESPONSIVE & GLOBAL STYLES
   ================================================================ */
@media (min-width: 768px) {
    .nav-user-name {
        display: inline;
    }
    
    .nav-menu {
        flex-wrap: nowrap;
    }
}

@media (max-width: 768px) {
    .nav {
        flex-wrap: wrap;
    }

    .nav-menu {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .nav-user-menu {
        order: 2;
        width: auto;
        justify-content: flex-end;
        border-left: none;
        padding-left: 0;
    }
    
    .btn:not(.btn-sm):not(.btn-lg) {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile action bar padding - LISATUD */
@media (max-width: 767px) {
    body.logged-in {
        padding-bottom: 70px;
    }
}

/* HIGH CONTRAST MODE SUPPORT */
@media (prefers-contrast: high) {
    :root {
        --color-border: #000;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    }

    .mobile-action-bar {
        border-top: 2px solid #000;
    }
    
    .mobile-action {
        border: 1px solid transparent;
    }
    
    .mobile-action:focus {
        border-color: #000;
        outline: 2px solid #000;
    }
}

/* REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .mobile-action-bar,
    .mobile-action,
    .mobile-nav,
    .mobile-nav-content {
        transition: none !important;
        animation: none !important;
    }
}

/* PRINT STYLES */
@media print {
    :root {
        --color-bg: white;
        --color-text: black;
        --color-border: #ccc;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
        background-color: white;
    }
    
    .header, .nav-user-menu, .btn, .form-group button,
    .mobile-action-bar, .mobile-nav, .mobile-only {
        display: none !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    body.logged-in {
        padding-bottom: 0 !important;
    }
}

/* ================================================================
   THEMING & DEBUGGING
   ================================================================ */

/* Dark theme custom properties */
[data-theme="dark"] {
    --mobile-action-bar-bg: #1e293b;
    --mobile-action-bar-border: #334155;
    --mobile-action-color: #94a3b8;
    --mobile-action-color-hover: #e2e8f0;
    --mobile-action-bg-hover: #334155;
    --mobile-action-bg-active: #1e40af;
    --mobile-nav-content-bg: #1e293b;
    --mobile-nav-item-color: #e2e8f0;
}

/* DEBUGGING HELPERS (Development only) */
/* Add to body class for debugging */
.debug-mobile-nav .mobile-action-bar {
    border: 2px dashed #ff0000;
}

.debug-mobile-nav .mobile-action {
    border: 1px dashed #00ff00;
}

.debug-mobile-nav .mobile-nav {
    border: 2px dashed #0000ff;
}

/* ============================================================
   THEME CUSTOMIZATION EXAMPLES
   ============================================================ */

/* Roheline teema (Green theme) */
/*
:root {
    --primary-hue: 120;
    --success-hue: 140;
    --gray-hue: 120;
}
*/

/* Punane teema (Red theme) */
/*
:root {
    --primary-hue: 0;
    --success-hue: 120;
    --warning-hue: 35;
    --gray-hue: 0;
}
*/

/* Lilla teema (Purple theme) */
/*
:root {
    --primary-hue: 270;
    --success-hue: 120;
    --warning-hue: 45;
    --gray-hue: 270;
}
*/