@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --primary: hsl(175, 32%, 24%);
    --primary-light: hsl(154, 100%, 31%);
    --primary-dark: hsl(175, 32%, 18%);
    --bg-light: hsl(0, 0%, 100%);
    --bg-dark: hsl(175, 32%, 24%);
    --card-light: #ffffff;
    --card-dark: hsl(175, 32%, 20%);
    --text-light: #1a1a1a;
    --text-dark: hsl(0, 0%, 100%);
    --text-muted-light: hsl(200, 13%, 73%);
    --text-muted-dark: hsl(175, 32%, 60%);
    --border-light: hsl(200, 13%, 85%);
    --border-dark: hsl(175, 32%, 30%);
    --critical: #dc3545;
    --high: #fd7e14;
    --medium: #ffc107;
    --low: #28a745;
    --info: #17a2b8;
    --error: #dc3545;
    --success: #28a745;
    --checkbox-bg: hsla(175, 32%, 24%, 0.3);
    --role-hover-light: hsl(175, 32%, 95%);
    --role-hover-dark: hsl(175, 32%, 22%);
    --font-body: 'Cairo', 'Inter', sans-serif;
    --font-heading: 'Space Grotesk', 'Cairo', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    min-height: 100vh;
    transition: all 0.3s ease;
}

body.light-theme { background: var(--bg-light); color: var(--text-light); }
body.dark-theme  { background: var(--bg-dark);  color: var(--text-dark);  }
body.ltr { direction: ltr; }
body.rtl { direction: rtl; }

h1, h2, h3, h4, h5, h6,
.page-title,
.section-title,
.card-title,
.brand-title,
.modal-title {
    font-family: var(--font-heading);
}