/* ================================================================
   Apana HRM - Light Theme (Default)
   CSS Custom Properties / Design Tokens
   ================================================================ */

[data-theme="light"],
:root {
    /* ── Primary Brand Colors ── */
    --primary: #4361EE;
    --primary-hover: #3A56D4;
    --primary-light: #EEF1FD;
    --primary-rgb: 67, 97, 238;

    --secondary: #7209B7;
    --secondary-hover: #5F0899;
    --secondary-light: #F3E8FA;
    --secondary-rgb: 114, 9, 183;

    /* ── Semantic Colors ── */
    --success: #06D6A0;
    --success-hover: #05B888;
    --success-light: #E6FAF5;
    --success-rgb: 6, 214, 160;

    --warning: #FFD166;
    --warning-hover: #F0C050;
    --warning-light: #FFF8E6;
    --warning-rgb: 255, 209, 102;

    --danger: #EF476F;
    --danger-hover: #D93D62;
    --danger-light: #FDE8ED;
    --danger-rgb: 239, 71, 111;

    --info: #118AB2;
    --info-hover: #0E7499;
    --info-light: #E7F4F9;
    --info-rgb: 17, 138, 178;

    /* ── Neutrals ── */
    --white: #FFFFFF;
    --gray-50: #F8F9FC;
    --gray-100: #F1F3F9;
    --gray-200: #E2E6EF;
    --gray-300: #CDD3E0;
    --gray-400: #A3ADC2;
    --gray-500: #7B869A;
    --gray-600: #6C757D;
    --gray-700: #495057;
    --gray-800: #343A40;
    --gray-900: #212529;

    /* ── Surface & Background ── */
    --body-bg: #F5F6FA;
    --surface: #FFFFFF;
    --surface-hover: #F8F9FC;
    --surface-alt: #F1F3F9;
    --card-bg: #FFFFFF;
    --card-border: #E2E6EF;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* ── Sidebar ── */
    --sidebar-bg: #1A1A2E;
    --sidebar-border: #252540;
    --sidebar-text: #A8A8C0;
    --sidebar-text-hover: #FFFFFF;
    --sidebar-active-bg: rgba(67, 97, 238, 0.15);
    --sidebar-active-text: #4361EE;
    --sidebar-header-text: #6C6C8A;
    --sidebar-icon: #6C6C8A;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;

    /* ── Topbar ── */
    --topbar-bg: #FFFFFF;
    --topbar-border: #E2E6EF;
    --topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --topbar-height: 60px;

    /* ── Text ── */
    --text-primary: #1A1A2E;
    --text-secondary: #6C757D;
    --text-muted: #A3ADC2;
    --text-inverse: #FFFFFF;
    --text-link: #4361EE;
    --text-link-hover: #3A56D4;

    /* ── Borders ── */
    --border-color: #E2E6EF;
    --border-light: #F1F3F9;
    --border-focus: #4361EE;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    /* ── Form Inputs ── */
    --input-bg: #FFFFFF;
    --input-border: #CDD3E0;
    --input-text: #1A1A2E;
    --input-placeholder: #A3ADC2;
    --input-focus-border: #4361EE;
    --input-focus-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
    --input-disabled-bg: #F1F3F9;

    /* ── Tables ── */
    --table-header-bg: #F8F9FC;
    --table-header-text: #495057;
    --table-border: #E2E6EF;
    --table-row-hover: #F5F6FA;
    --table-stripe: #FAFBFD;

    /* ── Scrollbar ── */
    --scrollbar-track: #F1F3F9;
    --scrollbar-thumb: #CDD3E0;
    --scrollbar-thumb-hover: #A3ADC2;

    /* ── Transitions ── */
    --transition-speed: 0.2s;
    --transition-fn: cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Typography ── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 15px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ── Z-index ── */
    --z-sidebar: 1000;
    --z-topbar: 1010;
    --z-dropdown: 1020;
    --z-modal: 1050;
    --z-toast: 1080;
    --z-tooltip: 1090;

    /* ── Highcharts Theme ── */
    --chart-bg: transparent;
    --chart-text: #495057;
    --chart-grid: #E2E6EF;
    --chart-colors: #4361EE, #7209B7, #06D6A0, #EF476F, #FFD166, #118AB2, #073B4C, #F72585;
}