/* dn-variables.css */

@font-face {
  font-family: 'Cairo';
  src: url(fonts/Cairo-VariableFont.eot);
  src: local('Cairo-VariableFont'),
    url(fonts/Cairo-VariableFont.eot?#iefix) format('embedded-opentype'),
    url(fonts/Cairo-VariableFont.ttf) format("truetype"),
    url(fonts/Cairo-VariableFont.svg) format("svg");
  font-weight: 400;
  /* Matches wght=400 in your original link */
  font-style: normal;
  font-display: swap;
  /* Optional: Controls font loading behavior */
}

@font-face {
  font-family: 'Cairo';
  src: url(fonts/Cairo-VariableFont.eot);
  src: local('Cairo-VariableFont'),
    url(fonts/Cairo-VariableFont.eot?#iefix) format('embedded-opentype'),
    url(fonts/Cairo-VariableFont.ttf) format("truetype"),
    url(fonts/Cairo-VariableFont.svg) format("svg");
  font-weight: 500;
  /* Matches wght=400 in your original link */
  font-style: normal;
  font-display: swap;
  /* Optional: Controls font loading behavior */
}

@font-face {
  font-family: 'Cairo';
  src: url(fonts/Cairo-VariableFont.eot);
  src: local('Cairo-VariableFont'),
    url(fonts/Cairo-VariableFont.eot?#iefix) format('embedded-opentype'),
    url(fonts/Cairo-VariableFont.ttf) format("truetype"),
    url(fonts/Cairo-VariableFont.svg) format("svg");
  font-weight: 600;
  /* Matches wght=400 in your original link */
  font-style: normal;
  font-display: swap;
  /* Optional: Controls font loading behavior */
}

@font-face {
  font-family: 'Cairo';
  src: url(fonts/Cairo-VariableFont.eot);
  src: local('Cairo-VariableFont'),
    url(fonts/Cairo-VariableFont.eot?#iefix) format('embedded-opentype'),
    url(fonts/Cairo-VariableFont.ttf) format("truetype"),
    url(fonts/Cairo-VariableFont.svg) format("svg");
  font-weight: 700;
  /* Matches wght=400 in your original link */
  font-style: normal;
  font-display: swap;
  /* Optional: Controls font loading behavior */
}

:root {
  /* --- DIMENSIONS & SPACING --- */
  --dn-sidebar-width: 280px;
  --dn-sidebar-collapsed-width: 80px;
  --dn-header-height: 70px;

  --dn-border-radius-sm: 6px;
  /* Adjusted based on current usage */
  --dn-border-radius-md: 8px;
  /* Adjusted based on current usage */
  --dn-border-radius-lg: 10px;
  /* Adjusted based on current usage */
  --dn-border-radius-xl: 12px;
  /* Adjusted based on current usage */
  --dn-border-radius-circle: 50%;

  --dn-padding-xs: 4px;
  --dn-padding-sm: 8px;
  --dn-padding-md: 12px;
  --dn-padding-lg: 16px;
  --dn-padding-xl: 20px;
  --dn-padding-xxl: 24px;
  --dn-padding-xxxl: 30px;

  --dn-gap-xs: 4px;
  --dn-gap-sm: 8px;
  --dn-gap-md: 12px;
  --dn-gap-lg: 16px;
  --dn-gap-xl: 20px;
  --dn-gap-xxl: 24px;
  --dn-gap-xxxl: 30px;

  /* --- TRANSITIONS --- */
  --dn-transition-speed: 0.3s;
  --dn-transition-speed-fast: 0.1s;
  /* For opacity/visibility changes */

  /* --- Z-INDEXES --- */
  --dn-z-overlay: 999;
  --dn-z-header: 1000;
  --dn-z-sidebar: 1001;
  --dn-z-tooltip: 1002;
  /* Added for sidebar tooltips */
  --dn-z-dropdown: 1050;
  --dn-z-stat-card-active: 20;
  /* Relative to its stacking context */
  --dn-z-section-card: 1;
  /* Relative to its stacking context */

  /* --- FONTS --- */
  --dn-font-family-primary: 'Cairo', 'Segoe UI', Arial, sans-serif;
  --dn-font-weight-normal: 400;
  --dn-font-weight-medium: 500;
  --dn-font-weight-semibold: 600;
  --dn-font-weight-bold: 700;

  --dn-font-size-xxs: 10px;
  /* For really small text like .dn-notification-time, .dn-item-status */
  --dn-font-size-xs: 11px;
  /* For .dn-sub-title-sidebar, .dn-user-role, .dn-nav-badge */
  --dn-font-size-sm: 12px;
  /* For .dn-stat-trend, .dn-item-description, .dn-item-meta, .dn-item-date */
  --dn-font-size-md: 13px;
  /* For .dn-btn, .dn-stat-card-dropdown .item-title, .dn-notification-title, .dn-service-grid-item .dn-item-name */
  --dn-font-size-base: 14px;
  /* For .dn-search-input, .dn-nav-link, .dn-stat-label, .dn-breadcrumb, .dn-view-all-btn, .dn-item-name (lists) */
  --dn-font-size-lg: 16px;
  /* For .dn-main-title-sidebar, .dn-user-name */
  --dn-font-size-xl: 18px;
  /* For .dn-section-title */
  --dn-font-size-xxl: 28px;
  /* For .dn-page-title, .dn-stat-number */

  --dn-line-height-tight: 1.2;
  /* For titles */
  --dn-line-height-snug: 1.3;
  /* For compact text */
  --dn-line-height-normal: 1.5;
  /* For body text, descriptions */

  /* --- ICON FILTERS --- */
  --dn-filter-to-primary:  brightness(100%) saturate(100%) invert(32%) sepia(85%) saturate(1600%) hue-rotate(337deg) brightness(85%) contrast(100%);
  /* --dn-filter-to-primary: invert(41%) sepia(93%) saturate(1075%) hue-rotate(117deg) brightness(95%) contrast(101%); */
  --dn-filter-icon-inverted: brightness(0) invert(1);
  /* For white icons on colored backgrounds */
  --dn-filter-icon-dark-mode: brightness(0.9) contrast(1.1) saturate(0.8);
  /* General adjustment for dark mode */
}

.dn-theme-light {
  /* --- PRIMARY COLORS --- */
  --dn-primary-color: #F36E37;
  --dn-primary-dark: #d1511a;
  --dn-primary-light: rgb(248, 142, 97);
  --dn-text-on-primary: #ffffff;
  /* Example: Text color on primary background */

  /* --- BACKGROUND & TEXT COLORS (Light Theme Default) --- */
  --dn-bg-primary: #f8f9fa;
  --dn-bg-secondary: #ffffff;
  --html-background-color: var(--dn-bg-primary);
  --dn-text-primary: #2d3436;
  --dn-text-secondary: #636e72;
  --dn-text-icon: #636e72;
  --dn-link-color: var(--dn-primary-color);
  --dn-link-hover-color: var(--dn-primary-dark);
  --dn-survey-well-background: #fbe1df;

  /* --- BORDER & SHADOW COLORS (Light Theme Default) --- */
  --dn-border-color: #e9ecef;
  --dn-shadow-color: rgba(0, 0, 0, 0.06);
  --dn-shadow-color-md: rgba(0, 0, 0, 0.1);
  --dn-survey-well-border-color:#ebc4c2;

  /* --- STATUS & ACTION COLORS (Light Theme Default) --- */
  --dn-color-error: #e74c3c;
  --dn-color-warning: #FFA000;
  --dn-color-success: #27ae60;
  --dn-color-info: #3498db;
  --dn-color-neutral-trend: var(--dn-color-warning);

  --dn-color-pending-bg: #fff3cd;
  --dn-color-pending-text: #856404;
  --dn-color-progress-bg: #cce5ff;
  --dn-color-progress-text: #004085;
  --dn-color-completed-bg: #d4edda;
  --dn-color-completed-text: #155724;
  --dn-color-overdue-bg: #f8d7da;
  --dn-color-overdue-text: #721c24;

  /* --- SPECIFIC ELEMENT COLORS (Light Theme Default) --- */
  --dn-nav-badge-bg: #e9ecef;
  --dn-nav-badge-text: #636e72;
  --dn-colored-icon-background: #f8f9fa;
  /* Used for icons in Departments, Services, Systems cards */
  --dn-header-icon-btn-bg-hover: #e9ecef;
  --dn-tooltip-bg: var(--dn-text-primary);
  --dn-tooltip-text: var(--dn-bg-secondary);

  /* --- Primefaces componants color --- */
  --dn-sidebar-background-color: var(--dn-bg-secondary);
  --button-background-color: var(--dn-primary-color);
  --well-background-color: #f8f9fa;
  --well-border-color: #e9ecef;
  --public-card-service-button: var(--dn-primary-color);
  --public-card-service-button-font: var(--dn-bg-secondary);
}

.dn-theme-dark {
  /* --- PRIMARY COLORS --- */
  --dn-primary-color: #F36E37;
  --dn-primary-dark: #d1511a;
  --dn-primary-light: rgb(248, 142, 97);
  --dn-text-on-primary: #ffffff;
  /* Example: Text color on primary background */

  /* --- BACKGROUND & TEXT COLORS (Dark Theme) --- */
  --dn-bg-primary: #1a1d21;
  --dn-bg-secondary: #252a30;
  --html-background-color: var(--dn-bg-primary);
  --dn-text-primary: #e0e0e0;
  --dn-text-secondary: #a0a0a0;
  --dn-text-icon: #b0b0b0;
  --dn-link-color: var(--dn-primary-light);
  --dn-survey-well-background:#5d3835;
  /* Lighter primary for links in dark mode */
  --dn-link-hover-color: #00caff;
  /* Example of a slightly different hover for dark */

  /* --- BORDER & SHADOW COLORS (Dark Theme) --- */
  --dn-border-color: #3a3f47;
  --dn-shadow-color: rgba(0, 0, 0, 0.15);
  --dn-shadow-color-md: rgba(0, 0, 0, 0.25);
  --dn-survey-well-border-color:#7d605e;

  /* --- STATUS & ACTION COLORS (Dark Theme) --- */
  --dn-color-error: #e74c3c;
  /* Error color can often remain the same */
  --dn-color-warning: #FFA000;
  /* Warning color can often remain the same */
  --dn-color-success: #27ae60;
  /* Success color can often remain the same */
  --dn-color-info: #3498db;
  /* Info color can often remain the same */

  --dn-color-pending-bg: #544510;
  --dn-color-pending-text: #fce38a;
  --dn-color-progress-bg: #1c3d5c;
  --dn-color-progress-text: #cce5ff;
  --dn-color-completed-bg: #13441e;
  --dn-color-completed-text: #b6f7c4;
  --dn-color-overdue-bg: #5c1a22;
  --dn-color-overdue-text: #fbc7ce;

  /* --- SPECIFIC ELEMENT COLORS (Dark Theme) --- */
  --dn-nav-badge-bg: #3a3f47;
  --dn-nav-badge-text: #c0c0c0;
  --dn-colored-icon-background: #2e3338;
  --dn-header-icon-btn-bg-hover: #3a3f47;
  --dn-tooltip-bg: var(--dn-text-primary);
  --dn-tooltip-text: var(--dn-bg-secondary);

  /* --- Primefaces componants color --- */
  --dn-sidebar-background-color: var(--dn-bg-secondary);
  --button-background-color: var(--dn-primary-color);
  --well-background-color: #3a3f47;
  --well-border-color: #5b616b;
  --public-card-service-button: var(--dn-primary-color);
  --public-card-service-button-font: var(--dn-tooltip-text);
}

/* Fallback for browsers not supporting prefers-color-scheme inside :root, if needed for initial load before JS applies classes */
/* This section would apply if no .dn-theme-light or .dn-theme-dark class is on the body yet */
@media (prefers-color-scheme: dark) {
  body:not(.dn-theme-light):not(.dn-theme-dark) {
    /* --- PRIMARY COLORS --- */
    --dn-primary-color: #F36E37;
    --dn-primary-dark: #d1511a;
    --dn-primary-light: rgb(248, 142, 97);
    --dn-text-on-primary: #ffffff;
    /* Example: Text color on primary background */

    /* --- BACKGROUND & TEXT COLORS (Dark Theme) --- */
    --dn-bg-primary: #1a1d21;
    --dn-bg-secondary: #252a30;
    --html-background-color: var(--dn-bg-primary);
    --dn-text-primary: #e0e0e0;
    --dn-text-secondary: #a0a0a0;
    --dn-text-icon: #b0b0b0;
    --dn-link-color: var(--dn-primary-light);
    /* Lighter primary for links in dark mode */
    --dn-link-hover-color: #00caff;
    /* Example of a slightly different hover for dark */

    /* --- BORDER & SHADOW COLORS (Dark Theme) --- */
    --dn-border-color: #3a3f47;
    --dn-shadow-color: rgba(0, 0, 0, 0.15);
    --dn-shadow-color-md: rgba(0, 0, 0, 0.25);

    /* --- STATUS & ACTION COLORS (Dark Theme) --- */
    --dn-color-error: #e74c3c;
    /* Error color can often remain the same */
    --dn-color-warning: #FFA000;
    /* Warning color can often remain the same */
    --dn-color-success: #27ae60;
    /* Success color can often remain the same */
    --dn-color-info: #3498db;
    /* Info color can often remain the same */

    --dn-color-pending-bg: #544510;
    --dn-color-pending-text: #fce38a;
    --dn-color-progress-bg: #1c3d5c;
    --dn-color-progress-text: #cce5ff;
    --dn-color-completed-bg: #13441e;
    --dn-color-completed-text: #b6f7c4;
    --dn-color-overdue-bg: #5c1a22;
    --dn-color-overdue-text: #fbc7ce;

    /* --- SPECIFIC ELEMENT COLORS (Dark Theme) --- */
    --dn-nav-badge-bg: #3a3f47;
    --dn-nav-badge-text: #c0c0c0;
    --dn-colored-icon-background: #2e3338;
    --dn-header-icon-btn-bg-hover: #3a3f47;
    --dn-tooltip-bg: var(--dn-text-primary);
    --dn-tooltip-text: var(--dn-bg-secondary);

    /* --- Primefaces componants color --- */
    --dn-sidebar-background-color: var(--dn-bg-secondary);
    --button-background-color: var(--dn-primary-color);
    --well-background-color: #3a3f47;
    --well-border-color: #5b616b;
    --public-card-service-button: var(--dn-primary-color);
    --public-card-service-button-font: var(--dn-tooltip-text);
  }
}