/* IncaOnline Theme - CSS Custom Properties */
:root {
    /* Primary Colors */
    --io-primary: #5c27e5;
    --io-primary-hover: #4a1fc4;
    --io-primary-light: #f0ebfc;

    /* Backgrounds */
    --io-bg-common: #f3f3f3;
    --io-bg-white: #ffffff;
    --io-bg-offwhite: #f5f5f5;
    --io-bg-dark: #1e293b;

    /* Text */
    --io-text-dark: #36393e;
    --io-text-muted: #6c757d;
    --io-text-white: #ffffff;

    /* Sidebar (light theme like old project) */
    --io-sidebar-bg: #f3f3f3;
    --io-sidebar-text: #333333;
    --io-sidebar-text-muted: #777777;
    --io-sidebar-hover: #e8e8e8;
    --io-sidebar-active: #5c27e5;
    --io-sidebar-border: #e0e0e0;
    --io-sidebar-width: 220px;
    --io-sidebar-collapsed-width: 60px;

    /* Header */
    --io-header-height: 60px;
    --io-header-bg: #ffffff;
    --io-header-border: #e2e8f0;

    /* Module Section Colors (container / card / hover-bg / hover-text) */
    --io-basedata: #5d7c8a;
    --io-basedata-card: #98b7c5;
    --io-basedata-hover: #192124;

    --io-invoicing: #b5a260;
    --io-invoicing-card: #dbc886;
    --io-invoicing-hover: #292415;

    --io-employee: #87413f;
    --io-employee-card: #c47a78;
    --io-employee-hover: #210f0f;

    --io-modules: #5A8D65;
    --io-modules-card: #93c19d;
    --io-modules-hover: #18261b;

    /* Semantic Colors */
    --io-success: #48bb78;
    --io-danger: #f56565;
    --io-warning: #ed8936;
    --io-info: #4299e1;

    /* Shadows */
    --io-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --io-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --io-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Borders */
    --io-border: #e2e8f0;
    --io-border-radius: 0.375rem;

    /* Transitions */
    --io-transition: all 0.3s ease;
}

/* Base Typography */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--io-text-dark);
    background-color: var(--io-bg-common);
}

a { color: var(--io-primary); text-decoration: none; }
a:hover { color: var(--io-primary-hover); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }