/* 
 * HFramework Theme Definitions (hf-theme.css)
 * Defines the VALUES for the variables used in hf-base.css.
 */

:root,
[data-hf-theme="light"] {
    /* Semantics */
    --hf-primary: #3b82f6;
    --hf-primary-hover: #2563eb;

    --hf-surface: #ffffff;
    --hf-bg: #f9fafb;
    --hf-bg-hover: #f3f4f6;

    /* Semantic Colors (Light) */
    --hf-color-blue: #2563eb;
    --hf-color-blue-dim: rgba(59, 130, 246, 0.1);

    --hf-color-green: #16a34a;
    --hf-color-green-dim: rgba(34, 197, 94, 0.1);

    --hf-color-red: #dc2626;
    --hf-color-red-dim: rgba(239, 68, 68, 0.1);

    --hf-color-orange: #ea580c;
    --hf-color-orange-dim: rgba(249, 115, 22, 0.1);

    --hf-color-purple: #9333ea;
    --hf-color-purple-dim: rgba(147, 51, 234, 0.1);

    --hf-color-gray: #4b5563;
    --hf-color-gray-dim: rgba(107, 114, 128, 0.1);

    --hf-text-primary: #111827;
    --hf-text-secondary: #6b7280;

    --hf-border-color: #e5e7eb;
    --hf-border-hover: #d1d5db;

    /* Grid Specifics - MOVED colors to generic vars in component */
    --hf-grid-radius: 0.5rem;

    /* Spacing */
    --hf-spacing-1: 0.25rem;
    --hf-spacing-2: 0.5rem;
    --hf-spacing-3: 0.75rem;
    --hf-spacing-4: 1rem;

    /* Radius */
    --hf-radius-sm: 0.375rem;
    --hf-radius-md: 0.5rem;

    /* Font */
    --hf-font-size-sm: 0.875rem;
    --hf-font-size-base: 1rem;
    --hf-font-size-xs: 0.75rem;

    --hf-primary-light: #eff6ff;
    /* Light mode selected row (blue-50 equivalent) */

    /* NavBar */
    --hf-navbar-width: 250px;
    --hf-navbar-collapsed-width: 64px;
    /* Dark navbar by default for contrast */

    /* Form Validation */
    --hf-danger: #ef4444;
    --hf-danger-light: #fee2e2;

    /* ========== Cards ========== */
    --hf-card-radius: var(--hf-radius-md);
    /* or xl based on components.css */
    --hf-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --hf-card-padding: var(--hf-spacing-4);

    /* ========== Buttons ========== */
    --hf-btn-padding-y: 0.5rem;
    --hf-btn-padding-x: 1rem;
    --hf-btn-radius: var(--hf-radius-md);
    --hf-btn-font-size: var(--hf-font-size-sm);
    --hf-btn-font-weight: 500;
    --hf-btn-focus-ring: 0 0 0 2px var(--hf-primary-light);

    /* ========== Inputs ========== */
    --hf-input-radius: var(--hf-radius-md);
    --hf-input-padding-y: 0.5rem;
    --hf-input-padding-x: 0.75rem;
    --hf-input-focus-border: var(--hf-primary);
    --hf-input-focus-ring: 0 0 0 2px var(--hf-primary-light);

    /* ========== Badges/Alerts ========== */
    --hf-badge-radius: 9999px;
    --hf-alert-radius: var(--hf-radius-md);

    /* ========== Date Picker ========== */
    /* Updated to use internal var */
    /* Explicit or var? using explicit for now to match theme.css logic or var if defined */
    /* theme.css defined vars for shadows? No, hf-theme.css doesn't seem to have shadow vars yet? check lines 1-60 */
    /* hf-theme.css doesn't define shadow vars in :root, so I will define them or use the values. */
    /* Actually, hf-base.css uses shadows? No, hf-base.css uses mostly layout. */
    /* Let's double check hf-theme.css content I viewed. */
    /* hf-theme.css does NOT have shadow vars. I should add them or just use the values. */
    --hf-datepicker-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    /* Calendar Colors (Light) */
    --hf-calendar-hover: #f3f4f6;
    --hf-calendar-today-bg: #eff6ff;
    --hf-calendar-today-text: #2563eb;
    --hf-calendar-selected-bg: #3b82f6;
    --hf-calendar-selected-text: #ffffff;
    --hf-calendar-range-bg: #eff6ff;

    /* ========== Dropdown ========== */
    /* Component specific colors removed, utilizing generic theme vars in css files */

    /* ========== Tabs ========== */
    --hf-tabs-border: var(--hf-border-color);
    --hf-tabs-header-gap: 2rem;
    --hf-tabs-header-mb: 1.5rem;
    --hf-tabs-item-pb: 0.75rem;

    /* ========== Validation Log ========== */
    --hf-validationlog-bg: var(--hf-surface);
    --hf-validationlog-border: var(--hf-border-color);
}

[data-hf-theme="dark"] {
    /* Semantics */
    --hf-primary: #60a5fa;
    --hf-primary-hover: #3b82f6;

    --hf-surface: #1f2937;
    --hf-bg: #111827;
    --hf-bg-hover: #374151;

    /* Semantic Colors (Dark) */
    --hf-color-blue: #60a5fa;
    --hf-color-blue-dim: rgba(59, 130, 246, 0.2);

    --hf-color-green: #4ade80;
    --hf-color-green-dim: rgba(34, 197, 94, 0.2);

    --hf-color-red: #f87171;
    --hf-color-red-dim: rgba(239, 68, 68, 0.2);

    --hf-color-orange: #fb923c;
    --hf-color-orange-dim: rgba(249, 115, 22, 0.2);

    --hf-color-purple: #c084fc;
    --hf-color-purple-dim: rgba(168, 85, 247, 0.2);

    --hf-color-gray: #9ca3af;
    --hf-color-gray-dim: rgba(156, 163, 175, 0.2);

    --hf-text-primary: #f9fafb;
    --hf-text-secondary: #9ca3af;

    --hf-border-color: #374151;
    --hf-border-hover: #4b5563;

    /* Grid Specifics */
    --hf-primary-light: #1e3a8a;
    /* Dark mode selected row */
    --hf-font-size-xs: 0.75rem;

    /* NavBar (Dark Mode - stays same or slightly adapted) */

    /* Form Validation (Dark Mode) */
    --hf-danger: #f87171;
    --hf-danger-light: #7f1d1d;

    /* ========== Cards (Dark) ========== */
    --hf-card-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4);

    /* ========== Inputs (Dark) ========== */
    /* Generic vars used in component files */

    /* ========== Date Picker (Dark) ========== */
    /* Generic vars used in component files */
    --hf-datepicker-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);

    /* Calendar Colors (Dark) */
    --hf-calendar-hover: #374151;
    --hf-calendar-today-bg: #1e3a8a;
    --hf-calendar-today-text: #60a5fa;
    --hf-calendar-selected-bg: #3b82f6;
    --hf-calendar-selected-text: #ffffff;
    --hf-calendar-range-bg: #1e3a8a;

    /* ========== Dropdown (Dark) ========== */
    /* Generic vars used in component files */

    /* ========== Tabs (Dark) ========== */
    /* --hf-tabs-border inherits from --hf-border-color which is already overridden above */
}