@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800&display=swap');

:root {
    --app-identity-info: #265faa;
    --app-identity-info-soft: #eaf2ff;
    --app-scroll-size: 8px;
    --app-scroll-thumb: #9aa1aa;
    --app-scroll-thumb-hover: #6c7582;
    --app-scroll-track: transparent;
    --app-date-today: #0f766e;
    --app-date-today-surface: #e0f5ef;
    --app-date-past: #8a5714;
    --app-date-past-surface: #fff3da;
    --app-date-future: #265faa;
    --app-date-future-surface: #eaf2ff;
    color-scheme: light;
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 24px;
    --app-space-6: 32px;
    --app-space-7: 48px;
    --app-font-family: 'Noto Kufi Arabic', sans-serif;
    --app-font-xs: 11px;
    --app-font-small: 12px;
    --app-font-body: 14px;
    --app-font-section: 20px;
    --app-font-title: 20px;
    --app-font-feature: 28px;
    --app-control-height: 44px;
    --app-density-section-gap: 16px;
    --app-density-grid-gap: 16px;
    --app-density-card-padding: 24px;
    --app-density-card-compact-padding: 16px;
    --app-density-card-head-padding: 16px;
    --app-density-form-gap: 16px;
    --app-density-dialog-padding: 24px;
    --app-density-table-padding-block: 12px;
    --app-density-table-padding-inline: 16px;
    --app-density-copy-leading: 1.8;
    --app-density-filter-control-height: 44px;
    --app-identity-focus: #0f766e;
    --app-identity-danger: #b42318;
    --app-identity-danger-soft: #fff1f0;
    --app-identity-success: #166534;
    --app-identity-success-soft: #f0fdf4;
    --app-identity-warning: #854d0e;
    --app-identity-warning-soft: #fefce8;
    --app-identity-on-accent: #ffffff;
    --app-workspace-page-surface: #F5F5F6;
    --app-identity-accent: #0f766e;
    --app-identity-accent-hover: #115e59;
    --app-identity-accent-soft: rgba(36, 207, 170, 0.11);
    --app-identity-text: #20242c;
    --app-identity-muted: #626974;
    --app-identity-surface: #ffffff;
    --app-identity-surface-soft: #F0F1F3;
    --app-identity-work-surface: #ffffff;
    --app-identity-border: #D7DAE0;
    --app-identity-border-strong: #A4ABB6;
    --app-identity-border-hover: #727C8B;
    --app-identity-input-surface: #FAFBFC;
    --app-identity-input-border: #848D9A;
    --app-identity-input-placeholder: #66707E;
    --app-identity-input-shadow: inset 0 1px 2px rgba(24, 32, 44, 0.04);
    --app-identity-focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.16);
    --app-identity-disabled-surface: #ECEEF1;
    --app-identity-disabled-text: #707681;
    --app-identity-button-surface: #FFFFFF;
    --app-identity-button-hover: #EDEFF2;
    --app-identity-button-shadow: 0 1px 2px rgba(24, 32, 44, 0.1);
    --app-identity-pressed-shadow: inset 0 1px 3px rgba(24, 32, 44, 0.18);
    --app-identity-overlay: rgba(16, 16, 17, 0.5);
    --app-identity-card-radius: 8px;
    --app-identity-control-radius: 6px;
    --app-identity-card-shadow: 0 3px 12px rgba(24, 32, 44, 0.07);
    --app-identity-control-shadow: 0 1px 2px rgba(24, 32, 44, 0.06);
    --app-workspace-rail-surface: #E9E9EC;
    --app-workspace-context-rail-surface: #E9E9EC;
    --app-workspace-rail-surface-strong: #ffffff;
    --app-workspace-rail-text: #2f3440;
    --app-workspace-rail-icon: #111827;
    --app-workspace-rail-muted: #686d78;
    --app-workspace-rail-border: #dddfe8;
    --app-workspace-rail-active-shadow: 0 10px 22px rgba(24, 35, 52, 0.08);
}

@media (max-width: 900px) {
    :root {
        --app-font-xs: 9px;
        --app-font-small: 10px;
        --app-font-body: 12px;
        --app-font-title: 15px;
        --app-font-section: 13px;
        --app-font-feature: 19px;
        --app-control-height: 38px;
        --app-density-section-gap: 10px;
        --app-density-grid-gap: 10px;
        --app-density-card-padding: 14px;
        --app-density-card-compact-padding: 10px;
        --app-density-card-head-padding: 10px;
        --app-density-form-gap: 10px;
        --app-density-dialog-padding: 14px;
        --app-density-table-padding-block: 8px;
        --app-density-table-padding-inline: 10px;
        --app-density-copy-leading: 1.55;
        --app-density-filter-control-height: 38px;
    }
}

@media (max-width: 600px) {
    :root {
        --app-font-title: 14px;
        --app-font-section: 12px;
        --app-font-feature: 17px;
        --app-control-height: 36px;
        --app-density-section-gap: 8px;
        --app-density-grid-gap: 8px;
        --app-density-card-padding: 10px;
        --app-density-card-compact-padding: 8px;
        --app-density-card-head-padding: 8px;
        --app-density-form-gap: 8px;
        --app-density-dialog-padding: 10px;
        --app-density-table-padding-block: 6px;
        --app-density-table-padding-inline: 8px;
        --app-density-filter-control-height: 36px;
    }
}

:root[data-app-theme="dark"],
html[data-app-theme="dark"],
body[data-app-theme="dark"],
.app-theme-dark {
    color-scheme: dark;
    --app-identity-on-accent: #10211f;
    --app-identity-focus: #5eead4;
    --app-identity-danger: #fda4af;
    --app-identity-danger-soft: #361e25;
    --app-identity-success: #86efac;
    --app-identity-success-soft: #142c23;
    --app-identity-warning: #fde68a;
    --app-identity-warning-soft: #302c1b;
    --app-workspace-page-surface: #101011;
    --app-identity-accent: #28d8ba;
    --app-identity-accent-hover: #36e6c8;
    --app-identity-accent-soft: rgba(40, 216, 186, 0.16);
    --app-identity-text: #EEEEF0;
    --app-identity-muted: #9D9EA4;
    --app-identity-surface: #18181A;
    --app-identity-surface-soft: #222225;
    --app-identity-work-surface: #101011;
    --app-identity-border: #38383E;
    --app-identity-border-strong: #585860;
    --app-identity-border-hover: #9898A3;
    --app-identity-input-surface: #202023;
    --app-identity-input-border: #71717B;
    --app-identity-input-placeholder: #A3A3AD;
    --app-identity-input-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    --app-identity-focus-ring: 0 0 0 3px rgba(94, 234, 212, 0.18);
    --app-identity-disabled-surface: #242427;
    --app-identity-disabled-text: #91919B;
    --app-identity-button-surface: #29292E;
    --app-identity-button-hover: #36363D;
    --app-identity-button-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
    --app-identity-pressed-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    --app-identity-overlay: rgba(0, 0, 0, 0.64);
    --app-identity-card-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    --app-identity-control-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    --app-identity-info: #a3c8ff;
    --app-identity-info-soft: #1c2d45;
    --app-scroll-thumb: #555760;
    --app-scroll-thumb-hover: #8c909c;
    --app-date-today: #5ee3ca;
    --app-date-today-surface: #16342f;
    --app-date-past: #f2c579;
    --app-date-past-surface: #352b1b;
    --app-date-future: #a3c8ff;
    --app-date-future-surface: #1c2d45;
    --app-workspace-rail-surface: #18181A;
    --app-workspace-context-rail-surface: #18181A;
    --app-workspace-rail-surface-strong: #28282D;
    --app-workspace-rail-text: #9D9EA4;
    --app-workspace-rail-icon: #9D9EA4;
    --app-workspace-rail-muted: #9D9EA4;
    --app-workspace-rail-border: #2B2B30;
    --app-workspace-rail-active-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}