/* ==========================================================================
   Worklist Design System - Light Theme
   Modern glass morphism with gradient background
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       Page Background - Gradient
       ------------------------------------------------------------------------- */
    --wl-bg-page: linear-gradient(135deg, #e0e7ff 0%, #fce7f3 50%, #dbeafe 100%);

    /* -------------------------------------------------------------------------
       Glass & Surfaces
       ------------------------------------------------------------------------- */
    --wl-bg-glass: rgba(255, 255, 255, 0.7);
    --wl-bg-glass-hover: rgba(255, 255, 255, 0.85);
    --wl-bg-solid: #ffffff;
    --wl-bg-subtle: #f8fafc;

    /* -------------------------------------------------------------------------
       Text Colors
       ------------------------------------------------------------------------- */
    --wl-text: #1e293b;
    --wl-text-secondary: #475569;
    --wl-text-muted: #94a3b8;

    /* -------------------------------------------------------------------------
       Borders
       ------------------------------------------------------------------------- */
    --wl-border: rgba(0, 0, 0, 0.08);
    --wl-border-subtle: rgba(0, 0, 0, 0.06);
    --wl-border-strong: rgba(0, 0, 0, 0.12);

    /* -------------------------------------------------------------------------
       Scrollbar
       ------------------------------------------------------------------------- */
    --wl-scrollbar-thumb: #cbd5e1;
    --wl-scrollbar-thumb-hover: #94a3b8;

    /* -------------------------------------------------------------------------
       Logo Visibility
       ------------------------------------------------------------------------- */
    --logo-color-visible: flex;
    --logo-white-visible: none;

    /* -------------------------------------------------------------------------
       Legacy Variables - For backwards compatibility
       ------------------------------------------------------------------------- */
    --main-bg-color: #f8f8f8;
    --main-text-color: #313131;
    --main-border: rgba(0, 0, 0, 0.08);
    --secondary-border: #dcdcdc;
    --muted-text-color: #94a3b8;
    --muted2-text-color: #bcbcbc;
    --muted3-text-color: #bcbcbc;
    --danger-text-color: #ef4444;
    --warning-text-color: #f59e0b;

    --danger-bg-color: #fef2f2;
    --warning-bg-color: #fefce8;
    --success-bg-color: #f0fdf4;

    --main-link-color: #3b82f6;
    --main-link-hover-color: #2563eb;
    --main-link-decoration: none;
    --main-link-trash-color: #ef4444;
    --secondary-link-color: #3b82f6;
    --secondary-link-hover-color: #2563eb;

    --link-box-hover-bg-color: #3b82f6;
    --link-box-hover-text-color: #fff;

    --content-headline-color: #64748b;

    --scrollbar-track: #e2e8f0;
    --scrollbar-thumb: #cbd5e1;

    --navbar-top-bg: rgba(255, 255, 255, 0.7);
    --navbar-top-link-color: #64748b;

    --navbar-bg-color: rgba(255, 255, 255, 0.7);
    --navbar-border-bottom-color: rgba(0, 0, 0, 0.08);
    --navbar-shadow: rgba(0, 0, 0, 0.05);
    --navbar-text-color: #64748b;
    --navbar-link-hover-color: #1e293b;
    --navbar-link-bg-hover-color: rgba(255, 255, 255, 0.5);

    --sidebar-width: 230px;
    --sidebar-bg-color: rgba(255, 255, 255, 0.7);
    --sidebar-brand-bg-color: #3b82f6;
    --sidebar-brand-border-color: #60a5fa;
    --sidebar-brand-text-color: #fff;
    --sidebar-text-color: #1e293b;
    --sidebar-link-color: #475569;
    --sidebar-link-hover-color: #3b82f6;
    --sidebar-link-bg-hover-color: rgba(59, 130, 246, 0.1);

    --mobile-footer-bg-color: rgba(255, 255, 255, 0.9);

    --box-bg-color: rgba(255, 255, 255, 0.7);
    --box-bg-color-transparent: rgba(255, 255, 255, 0.5);
    --box-text-color: #1e293b;
    --box-text-hover-color: #0f172a;
    --box-link-color: #3b82f6;
    --box-link-hover-color: #2563eb;
    --box-border-color: rgba(0, 0, 0, 0.08);
    --box-border-active-color: #3b82f6;

    --form-input-bg: #fff;
    --form-input-focus-bg: #fff;
    --form-input-placeholder: #94a3b8;
    --form-input-text-color: #1e293b;
    --form-input-border-color: #e2e8f0;
    --form-input-border-glow: rgba(59, 130, 246, 0.25);
    --form-input-bg-disabled: #f1f5f9;
    --form-label-color: #64748b;
    --form-switch-bg: #cbd5e1;
    --form-range-thumb-bg: #3b82f6;
    --form-range-track-bg: #e2e8f0;
    --form-select-bg: #fff;
    --form-select-bg-hover: #f8fafc;
    --form-border-color: #e2e8f0;

    --modal-bg: #fff;
    --modal-border-color: rgba(0, 0, 0, 0.08);

    --modal-fullscreen-left-bg: #1e293b;
    --modal-fullscreen-main-bg: #fff;

    --bg-shade1: #f8fafc;
    --bg-shade2: #f1f5f9;
    --bg-shade3: #e2e8f0;
    --bg-shade4: #cbd5e1;
    --bg-shade5: #94a3b8;

    --dropdown-bg-color: #fff;
    --dropdown-header-text-color: #64748b;
    --dropdown-divider-color: #f1f5f9;
    --dropdown-item-text-color: #1e293b;
    --dropdown-item-text-hover-color: #0f172a;
    --dropdown-item-bg-hover-color: #f8fafc;

    --table-row: #fff;
    --table-row-text-hover: #1e293b;
    --table-row-bg-hover: #f8fafc;
    --table-header-border: #e2e8f0;

    --avatar-size-md: 50px;

    --notification-bg-pending-color: #eff6ff;
    --notification-bg-pending-color-hover: #dbeafe;
    --notification-bg-sent-color: #eff6ff;
    --notification-bg-sent-color-hover: #dbeafe;
    --notification-bg-read-color: transparent;
    --notification-bg-read-color-hover: #f8fafc;

    --list-group-bg: rgba(255, 255, 255, 0.7);
    --list-group-item-bg: rgba(255, 255, 255, 0.5);
    --list-group-item-hover-bg: rgba(255, 255, 255, 0.9);
    --list-subgroup-bg: #f8fafc;
    --list-subgroup-item-txtcolor: #475569;
    --list-subgroup-item-bg: #fff;
    --list-subgroup-item-hover-bg: #e2e8f0;
}