:root {
    --color-sidebar-bg: oklch(22% 0.01 55);
    --color-sidebar-active: oklch(28% 0.015 55);
    --color-sidebar-hover: oklch(26% 0.012 55);
    --color-sidebar-text: oklch(82% 0.008 70);
    --color-sidebar-section: oklch(58% 0.01 60);
    --color-sidebar-border: oklch(100% 0.003 75 / 0.08);
    --color-sidebar-brand: oklch(98% 0.003 75);
    --color-accent: oklch(58% 0.10 220);
    --color-accent-hover: oklch(52% 0.10 220);
    --color-accent-ring: oklch(58% 0.10 220 / 0.3);
    --color-body-bg: oklch(96% 0.006 75);
    --color-card-bg: oklch(99% 0.003 75);
    --color-border: oklch(90% 0.008 65);
    --color-heading: oklch(22% 0.008 55);
    --color-body-text: oklch(38% 0.008 55);
    --color-muted: oklch(55% 0.006 60);
    --color-footer: oklch(65% 0.006 60);
    --color-table-header: oklch(97% 0.005 75);
    --color-input-border: oklch(88% 0.008 65);
    --color-input-bg: oklch(99% 0.003 75);
    --color-overlay: oklch(0% 0 0 / 0.45);
    --color-error: oklch(50% 0.16 28);
    --color-error-bg: oklch(96% 0.035 28);
    --color-error-border: oklch(83% 0.07 28);
    --color-success: oklch(41% 0.10 155);
    --color-success-bg: oklch(95% 0.045 155);
    --color-success-border: oklch(82% 0.08 155);
    --color-warning: oklch(47% 0.10 80);
    --color-warning-bg: oklch(97% 0.055 90);
    --color-warning-border: oklch(85% 0.11 90);
    --color-info: oklch(42% 0.09 220);
    --color-info-bg: oklch(95% 0.035 220);
    --color-info-border: oklch(82% 0.07 220);
    --color-weekend-bg: oklch(97% 0.005 75);
    --color-disabled-bg: oklch(94% 0.006 70);
    --color-disabled-text: oklch(63% 0.006 60);

    --status-present-solid: oklch(63% 0.16 155);
    --status-present-bg: oklch(94% 0.045 155);
    --status-present-text: oklch(33% 0.10 155);
    --status-present-border: oklch(80% 0.09 155);
    --status-support-solid: oklch(58% 0.12 235);
    --status-support-bg: oklch(94% 0.035 235);
    --status-support-text: oklch(34% 0.10 235);
    --status-support-border: oklch(80% 0.075 235);
    --status-ordinary-solid: oklch(74% 0.16 88);
    --status-ordinary-bg: oklch(96% 0.06 90);
    --status-ordinary-text: oklch(42% 0.10 82);
    --status-ordinary-border: oklch(84% 0.13 88);
    --status-casual-solid: oklch(66% 0.16 52);
    --status-casual-bg: oklch(95% 0.045 55);
    --status-casual-text: oklch(39% 0.12 45);
    --status-casual-border: oklch(82% 0.105 55);
    --status-sick-solid: oklch(61% 0.16 305);
    --status-sick-bg: oklch(95% 0.035 305);
    --status-sick-text: oklch(38% 0.13 305);
    --status-sick-border: oklch(82% 0.08 305);
    --status-absent-solid: oklch(57% 0.18 28);
    --status-absent-bg: oklch(95% 0.04 28);
    --status-absent-text: oklch(38% 0.14 28);
    --status-absent-border: oklch(82% 0.09 28);

    --font-family: "Cairo", "Tajawal", "IBM Plex Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-size-display: 1.5rem;
    --font-size-headline: 1.25rem;
    --font-size-title: 1rem;
    --font-size-body: 0.875rem;
    --font-size-label: 0.78rem;
    --font-size-micro: 0.68rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-display: 1.1;
    --line-height-headline: 1.3;
    --line-height-title: 1.4;
    --line-height-body: 1.5;
    --line-height-label: 1.3;
    --line-height-micro: 1.2;

    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.25rem;
    --space-xl: 1.5rem;
    --space-xxl: 2rem;

    --radius-sm: 0.3rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-input: 0.375rem;

    --shadow-ambient: 0 1px 3px oklch(22% 0.01 55 / 0.08);
    --shadow-hover: 0 0.5rem 1rem oklch(22% 0.01 55 / 0.12);
    --shadow-modal: 0 4px 24px oklch(22% 0.01 55 / 0.14);
    --shadow-soft: 0 0.25rem 0.75rem oklch(22% 0.01 55 / 0.07);

    --transition-fast: 150ms ease;
    --transition-standard: 200ms ease;
    --transition-slide: 300ms ease;
    --sidebar-width: 260px;
    --topbar-height: 56px;

    --body-bg: var(--color-body-bg);
    --card-bg: var(--color-card-bg);
    --topbar-bg: var(--color-card-bg);
    --topbar-border: var(--color-border);
    --sidebar-bg: var(--color-sidebar-bg);
    --sidebar-text: var(--color-sidebar-text);
    --sidebar-hover: var(--color-sidebar-hover);
    --sidebar-active: var(--color-sidebar-active);
    --sidebar-accent: var(--color-accent);
}