/* web/static/css/base/_variables.css */

:root {
    /* Using Inter font */
    --font-sans: 'Inter', sans-serif;

    /* --- Light Theme Variables (Refined Contrast) --- */
    --_surface-1-light: var(--gray-0);
    --_surface-2-light: var(--gray-1);
    --_surface-3-light: var(--gray-2);
    --_surface-4-light: var(--white);
    --_text-1-light: var(--gray-9);
    --_text-2-light: var(--gray-6);
    --_text-3-light: var(--gray-5);
    --_brand-light: var(--indigo-6);
    --_brand-soft-light: var(--indigo-0);
    --_brand-contrast-light: var(--white);
    --_border-color-light: var(--gray-2);
    --_shadow-color-light: 220 3% 15%;
    --_shadow-strength-light: 0.5%;
    --_icon-color-light: var(--gray-5);
    --_link-light: var(--indigo-7);
    --_danger-light: var(--red-6);
    --_danger-soft-light: var(--red-0);
    --_success-light: var(--green-6);
    --_success-soft-light: var(--green-0);
    --_warning-light: var(--orange-6); /* Added */
    --_warning-soft-light: var(--orange-0); /* Added */
    --_info-light: var(--blue-6); /* Added */
    --_info-soft-light: var(--blue-0); /* Added */
    --_input-border-light: var(--gray-3);
    --_input-focus-border-light: var(--_brand-light);
    --_input-invalid-border-light: var(--_danger-light);
    --_input-invalid-focus-shadow-light: hsl(var(--red-6-hsl) / 0.2);

    /* Specific component colors (light - refined) */
    --_nav-hover-bg-light: var(--_surface-2-light);
    --_nav-hover-text-light: var(--_text-1-light);
    --_nav-active-bg-light: var(--_brand-soft-light);
    --_nav-active-text-light: var(--_brand-light);
    --_upgrade-bg-light: var(--indigo-0);
    --_upgrade-border-light: var(--indigo-2);
    --_button-primary-bg-light: var(--_brand-light);
    --_button-primary-text-light: var(--_brand-contrast-light);
    --_button-primary-hover-bg-light: var(--indigo-7);
    --_button-secondary-bg-light: var(--_surface-1-light);
    --_button-secondary-text-light: var(--_text-2-light);
    --_button-secondary-border-light: var(--_border-color-light);
    --_button-secondary-hover-bg-light: var(--_surface-2-light);
    --_button-secondary-hover-text-light: var(--_text-1-light);
    --_button-tertiary-text-light: var(--_text-2-light);
    --_button-tertiary-hover-text-light: var(--_brand-light);
    --_status-confirmed-text-light: var(--green-7);
    --_status-confirmed-bg-light: var(--green-0);
    --_status-pending-text-light: var(--orange-7);
    --_status-pending-bg-light: var(--orange-0);
    --_status-cancelled-text-light: var(--red-7);
    --_status-cancelled-bg-light: var(--red-0);
    --_sidebar-footer-hover-bg-light: var(--_surface-2-light);
    --_sidebar-footer-hover-text-light: var(--_text-1-light);


    /* --- Dark Theme Variables (Refined Contrast) --- */
    --_surface-1-dark: var(--gray-9);
    --_surface-2-dark: var(--gray-10);
    --_surface-3-dark: var(--gray-8);
    --_surface-4-dark: var(--black);
    --_text-1-dark: var(--gray-1);
    --_text-2-dark: var(--gray-5);
    --_text-3-dark: var(--gray-6);
    --_brand-dark: var(--indigo-5);
    --_brand-soft-dark: var(--indigo-9);
    --_brand-contrast-dark: var(--gray-0);
    --_border-color-dark: var(--gray-8);
    --_shadow-color-dark: 220 40% 2%;
    --_shadow-strength-dark: 3%;
    --_icon-color-dark: var(--gray-6);
    --_link-dark: var(--indigo-4);
    --_danger-dark: var(--red-5);
    --_danger-soft-dark: hsl(var(--red-9-hsl) / 0.2);
    --_success-dark: var(--green-5);
    --_success-soft-dark: hsl(var(--green-9-hsl) / 0.2);
    --_warning-dark: var(--orange-5); /* Added */
    --_warning-soft-dark: hsl(var(--orange-9-hsl) / 0.2); /* Added */
    --_info-dark: var(--blue-5); /* Added */
    --_info-soft-dark: hsl(var(--blue-9-hsl) / 0.2); /* Added */
    --_input-border-dark: var(--gray-7);
    --_input-focus-border-dark: var(--_brand-dark);
    --_input-invalid-border-dark: var(--_danger-dark);
    --_input-invalid-focus-shadow-dark: hsl(var(--red-5-hsl) / 0.25);


     /* Specific component colors (dark - refined) */
    --_nav-hover-bg-dark: var(--_surface-3-dark);
    --_nav-hover-text-dark: var(--_text-1-dark);
    --_nav-active-bg-dark: var(--_brand-soft-dark);
    --_nav-active-text-dark: var(--_brand-dark);
    --_upgrade-bg-dark: var(--indigo-9);
    --_upgrade-border-dark: var(--indigo-7);
    --_button-primary-bg-dark: var(--_brand-dark);
    --_button-primary-text-dark: var(--_brand-contrast-dark);
    --_button-primary-hover-bg-dark: var(--indigo-6);
    --_button-secondary-bg-dark: var(--_surface-3-dark);
    --_button-secondary-text-dark: var(--_text-2-dark);
    --_button-secondary-border-dark: var(--_border-color-dark);
    --_button-secondary-hover-bg-dark: var(--gray-7);
    --_button-secondary-hover-text-dark: var(--_text-1-dark);
    --_button-tertiary-text-dark: var(--_text-2-dark);
    --_button-tertiary-hover-text-dark: var(--_brand-dark);
    --_status-confirmed-text-dark: var(--green-4);
    --_status-confirmed-bg-dark: hsl(var(--green-9-hsl) / 0.2);
    --_status-pending-text-dark: var(--orange-4);
    --_status-pending-bg-dark: hsl(var(--orange-9-hsl) / 0.2);
    --_status-cancelled-text-dark: var(--red-4);
    --_status-cancelled-bg-dark: hsl(var(--red-9-hsl) / 0.2);
    --_sidebar-footer-hover-bg-dark: var(--_surface-3-dark);
    --_sidebar-footer-hover-text-dark: var(--_text-1-dark);

    /* Map light theme by default */
    --surface-1: var(--_surface-1-light);
    --surface-2: var(--_surface-2-light);
    --surface-3: var(--_surface-3-light);
    --surface-4: var(--_surface-4-light);
    --text-1: var(--_text-1-light);
    --text-2: var(--_text-2-light);
    --text-3: var(--_text-3-light);
    --brand: var(--_brand-light);
    --brand-soft: var(--_brand-soft-light);
    --brand-contrast: var(--_brand-contrast-light);
    --border-color: var(--_border-color-light);
    --shadow-color-hsl: var(--_shadow-color-light);
    --shadow-strength: var(--_shadow-strength-light);
    --icon-color: var(--_icon-color-light);
    --link-color: var(--_link-light);
    --danger-color: var(--_danger-light);
    --danger-soft: var(--_danger-soft-light);
    --success-color: var(--_success-light);
    --success-soft: var(--_success-soft-light);
    --warning-color: var(--_warning-light); /* Added */
    --warning-soft: var(--_warning-soft-light); /* Added */
    --info-color: var(--_info-light); /* Added */
    --info-soft: var(--_info-soft-light); /* Added */
    --input-border: var(--_input-border-light);
    --input-focus-border: var(--_input-focus-border-light);
    --input-invalid-border: var(--_input-invalid-border-light);
    --input-invalid-focus-shadow: var(--_input-invalid-focus-shadow-light);
    --nav-hover-bg: var(--_nav-hover-bg-light);
    --nav-hover-text: var(--_nav-hover-text-light);
    --nav-active-bg: var(--_nav-active-bg-light);
    --nav-active-text: var(--_nav-active-text-light);
    --upgrade-bg: var(--_upgrade-bg-light);
    --upgrade-border: var(--_upgrade-border-light);
    --button-primary-bg: var(--_button-primary-bg-light);
    --button-primary-text: var(--_button-primary-text-light);
    --button-primary-hover-bg: var(--_button-primary-hover-bg-light);
    --button-secondary-bg: var(--_button-secondary-bg-light);
    --button-secondary-text: var(--_button-secondary-text-light);
    --button-secondary-border: var(--_button-secondary-border-light);
    --button-secondary-hover-bg: var(--_button-secondary-hover-bg-light);
    --button-secondary-hover-text: var(--_button-secondary-hover-text-light);
    --button-tertiary-text: var(--_button-tertiary-text-light);
    --button-tertiary-hover-text: var(--_button-tertiary-hover-text-light);
    --status-confirmed-text: var(--_status-confirmed-text-light);
    --status-confirmed-bg: var(--_status-confirmed-bg-light);
    --status-pending-text: var(--_status-pending-text-light);
    --status-pending-bg: var(--_status-pending-bg-light);
    --status-cancelled-text: var(--_status-cancelled-text-light);
    --status-cancelled-bg: var(--_status-cancelled-bg-light);
    --sidebar-footer-hover-bg: var(--_sidebar-footer-hover-bg-light);
    --sidebar-footer-hover-text: var(--_sidebar-footer-hover-text-light);

}

/* Text selection styles */
::selection {
    background-color: var(--brand);
    color: var(--brand-contrast);
}

::-moz-selection {
    background-color: var(--brand);
    color: var(--brand-contrast);
}

[data-theme="dark"] {
     /* Map dark theme variables */
    --surface-1: var(--_surface-1-dark);
    --surface-2: var(--_surface-2-dark);
    --surface-3: var(--_surface-3-dark);
    --surface-4: var(--_surface-4-dark);
    --text-1: var(--_text-1-dark);
    --text-2: var(--_text-2-dark);
    --text-3: var(--_text-3-dark);
    --brand: var(--_brand-dark);
    --brand-soft: var(--_brand-soft-dark);
    --brand-contrast: var(--_brand-contrast-dark);
    --border-color: var(--_border-color-dark);
    --shadow-color-hsl: var(--_shadow-color-dark);
    --shadow-strength: var(--_shadow-strength-dark);
    --icon-color: var(--_icon-color-dark);
    --link-color: var(--_link-dark);
    --danger-color: var(--_danger-dark);
    --danger-soft: var(--_danger-soft-dark);
    --success-color: var(--_success-dark);
    --success-soft: var(--_success-soft-dark);
    --warning-color: var(--_warning-dark); /* Added */
    --warning-soft: var(--_warning-soft-dark); /* Added */
    --info-color: var(--_info-dark); /* Added */
    --info-soft: var(--_info-soft-dark); /* Added */
    --input-border: var(--_input-border-dark);
    --input-focus-border: var(--_input-focus-border-dark);
    --input-invalid-border: var(--_input-invalid-border-dark);
    --input-invalid-focus-shadow: var(--_input-invalid-focus-shadow-dark);
    --nav-hover-bg: var(--_nav-hover-bg-dark);
    --nav-hover-text: var(--_nav-hover-text-dark);
    --nav-active-bg: var(--_nav-active-bg-dark);
    --nav-active-text: var(--_nav-active-text-dark);
    --upgrade-bg: var(--_upgrade-bg-dark);
    --upgrade-border: var(--_upgrade-border-dark);
    --button-primary-bg: var(--_button-primary-bg-dark);
    --button-primary-text: var(--_button-primary-text-dark);
    --button-primary-hover-bg: var(--_button-primary-hover-bg-dark);
    --button-secondary-bg: var(--_button-secondary-bg-dark);
    --button-secondary-text: var(--_button-secondary-text-dark);
    --button-secondary-border: var(--_button-secondary-border-dark);
    --button-secondary-hover-bg: var(--_button-secondary-hover-bg-dark);
    --button-secondary-hover-text: var(--_button-secondary-hover-text-dark);
    --button-tertiary-text: var(--_button-tertiary-text-dark);
    --button-tertiary-hover-text: var(--_button-tertiary-hover-text-dark);
    --status-confirmed-text: var(--_status-confirmed-text-dark);
    --status-confirmed-bg: var(--_status-confirmed-bg-dark);
    --status-pending-text: var(--_status-pending-text-dark);
    --status-pending-bg: var(--_status-pending-bg-dark);
    --status-cancelled-text: var(--_status-cancelled-text-dark);
    --status-cancelled-bg: var(--_status-cancelled-bg-dark);
    --sidebar-footer-hover-bg: var(--_sidebar-footer-hover-bg-dark);
    --sidebar-footer-hover-text: var(--_sidebar-footer-hover-text-dark);
}

:root {
    /* Layout Dimensions */
    --left-sidebar-width: 260px;
    --header-height: 60px;

    /* Transitions */
    --transition-speed: 0.2s;
    --transition-ease: var(--ease-3);

    /* Shadows */
    --shadow-1: 0 1px 2px 0 hsl(var(--shadow-color-hsl) / calc(var(--shadow-strength) + 6%));
    --shadow-2: 0 3px 6px -1px hsl(var(--shadow-color-hsl) / calc(var(--shadow-strength) + 8%));
    --shadow-3: 0 10px 15px -3px hsl(var(--shadow-color-hsl) / calc(var(--shadow-strength) + 10%)), 0 4px 6px -2px hsl(var(--shadow-color-hsl) / calc(var(--shadow-strength) + 5%));

    /* Focus Ring */
    --focus-ring-color: var(--brand);
    --focus-ring-width: 2px;
    --focus-ring-offset: 1px;
}