/* css/_variables.css */

/* --- CSS Variables (Custom Properties) --- */
:root {
    /* Primary Colors - Changed for better visibility */
    --color-primary-base: #3b82f6; /* Brighter Blue-500 */
    --color-primary-hover: #2563eb; /* Blue-600 */
    --color-primary-focus-ring: rgba(59, 130, 246, 0.4); /* Blue-500 with opacity */

    /* Secondary Colors */
    --color-secondary-base: #6b7280; /* Gray-600 */
    --color-secondary-hover: #4b5563; /* Gray-700 */

    /* Danger/Error Colors */
    --color-danger-base: #dc2626; /* Red-600 */
    --color-danger-hover: #b91c1c; /* Red-700 */
    --color-danger-light: #fee2e2; /* Red-100 */
    --color-danger-border: #ef4444; /* Red-500 */
    --color-danger-text: #b91c1c; /* Red-700 */

    /* Info Colors */
    --color-info-base: #3b82f6; /* Blue-500 */
    --color-info-hover: #2563eb; /* Blue-600 */

    /* Success Colors */
    --color-success-base: #16a34a; /* Green-600 */
    --color-success-hover: #15803d; /* Green-700 */
    --color-success-light: #dcfce7; /* Green-100 */
    --color-success-text: #15803d; /* Green-700 */

    /* Warning Colors */
    --color-warning-base: #f59e0b; /* Amber-500 */
    --color-warning-hover: #d97706; /* Amber-600 */
    --color-warning-light: #fff3cd; /* Amber-100 */
    --color-warning-border: #ffeeba; /* Amber-200 */
    --color-warning-text: #856404; /* Dark Amber */

    /* Neutral/Gray Palette */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Text Colors */
    --text-color-default: var(--color-gray-800);
    --text-color-light: var(--color-gray-300);
    --text-color-lighter: var(--color-gray-400);
    --text-color-lightest: var(--color-gray-500);
    --text-color-dark: var(--color-gray-900);
    --text-color-white: #ffffff;

    /* Background Colors */
    --bg-color-app: var(--color-gray-100);
    --bg-color-header: var(--color-gray-900);
    --bg-color-sidebar: var(--color-gray-800);
    --bg-color-card: var(--text-color-white);
    --bg-color-modal: var(--text-color-white);
    --bg-color-light: var(--color-gray-50);
    --bg-color-dark: var(--color-gray-700);
    --color-blue-100: #e0e7ff; /* Existing blue-100 for 'today' */
    --color-indigo-900: #1e1b4b; /* Darker indigo for dark mode 'today' */


    /* Border Colors */
    --border-color-light: #e5e7eb;
    --border-color-medium: #d1d5db;
    --border-color-dark: #4b5563;
    --border-color-darker: #374151;

    /* Spacing */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Border Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.05);
}