:root {
    --font-family: 'Cairo', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Brand — refreshed teal/aqua with deeper accent */
    --coda-primary: #0FB5A0;
    --coda-primary-soft: #E1FBF5;
    --coda-secondary: #38D9C0;
    --coda-mint: #E8FCF6;
    --coda-teal-deep: #0A8A78;
    --coda-aqua-light: #F1FCF9;

    --brand-gradient: linear-gradient(135deg, #14C8AE 0%, #0FB5A0 45%, #0A8A78 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(15,181,160,0.12) 0%, rgba(10,138,120,0.10) 100%);
    --brand-gradient-subtle: linear-gradient(135deg, #F6FFFD 0%, #EBFDF7 100%);
    --brand-gradient-vivid: linear-gradient(135deg, #14C8AE 0%, #1AAEDC 100%);

    --color-primary-50:  #E1FBF5;
    --color-primary-100: #C5F6EC;
    --color-primary-200: #93EAD8;
    --color-primary-300: #5BDCC3;
    --color-primary-400: #2BCBB1;
    --color-primary-500: #0FB5A0;
    --color-primary-600: #0A8A78;
    --color-primary-700: #086F62;
    --color-primary-800: #06544A;
    --color-primary-900: #043C36;

    --color-secondary-50:  #EAF2FF;
    --color-secondary-100: #C8DEFF;
    --color-secondary-200: #8FBCFA;
    --color-secondary-300: #5C9DF5;
    --color-secondary-400: #2F82EB;
    --color-secondary-500: #2563EB;
    --color-secondary-600: #1D4ED8;
    --color-secondary-700: #1E40AF;

    --color-success-50:  #ECFDF3;
    --color-success-100: #D1FAE5;
    --color-success-200: #A6E9C0;
    --color-success-500: #15A04A;
    --color-success-600: #138038;
    --color-success-700: #0F6630;
    --color-success-800: #0E532A;

    --color-warning-50:  #FFF8E5;
    --color-warning-100: #FEF1C2;
    --color-warning-200: #FCE38A;
    --color-warning-300: #F8CD58;
    --color-warning-500: #F4A300;
    --color-warning-600: #D88500;
    --color-warning-700: #A75F00;
    --color-warning-800: #7C4500;

    --color-danger-50:  #FEF1F1;
    --color-danger-100: #FCDCDC;
    --color-danger-200: #F9B6B6;
    --color-danger-500: #E53935;
    --color-danger-600: #C92724;
    --color-danger-700: #9F1B1B;
    --color-danger-800: #7A1414;

    --color-info-50:  #E5F5FF;
    --color-info-100: #C7E8FB;
    --color-info-200: #9CD0F2;
    --color-info-500: #1AAEDC;
    --color-info-600: #0F8DBA;
    --color-info-700: #0B6E92;
    --color-info-800: #07526E;

    --color-purple-50:  #F0E8FF;
    --color-purple-100: #E0D3FF;
    --color-purple-500: #7C3AED;
    --color-purple-600: #6D28D9;
    --color-purple-700: #5B21B6;

    --color-orange-50:  #FFF1E6;
    --color-orange-100: #FCE0C2;
    --color-orange-500: #E9610A;
    --color-orange-600: #C24E0B;
    --color-orange-700: #964010;
    --color-orange-800: #74331A;

    --color-private:        #D4A72C;
    --color-private-soft:   #FFF7E1;
    --color-private-dark:   #92400E;
    --color-private-border: #FDE68A;
    --color-private-warm:   #FEF3C7;

    --color-memo:      #7C3AED;
    --color-memo-soft: #F0E8FF;
    --color-memo-dark: #5B21B6;

    --color-incoming:      #15A04A;
    --color-incoming-soft: #ECFDF3;
    --color-incoming-dark: #0F6630;

    --color-outgoing:      #1AAEDC;
    --color-outgoing-soft: #E5F5FF;
    --color-outgoing-dark: #0B6E92;

    --color-admin:       #475569;
    --color-admin-soft:  #F1F5F9;

    --color-overlay-white-soft:    rgba(255, 255, 255, 0.06);
    --color-overlay-white-medium:  rgba(255, 255, 255, 0.12);
    --color-overlay-white-strong:  rgba(255, 255, 255, 0.30);
    --color-overlay-white-stronger:rgba(255, 255, 255, 0.40);

    --color-qa-highlight-soft:    rgba(59, 89, 152, 0.30);
    --color-qa-highlight-medium:  rgba(59, 89, 152, 0.40);
    --color-qa-highlight-strong:  rgba(59, 89, 152, 0.50);

    --gradient-private-action: linear-gradient(135deg, var(--color-memo), var(--color-memo-dark));

    --color-brand-tint-04:  rgba(22, 194, 163, 0.04);
    --color-brand-tint-06:  rgba(95, 211, 196, 0.05);
    --color-brand-tint-08:  rgba(22, 194, 163, 0.08);
    --color-brand-tint-10:  rgba(21, 183, 158, 0.10);
    --color-brand-tint-12:  rgba(21, 183, 158, 0.12);
    --color-brand-tint-15:  rgba(21, 183, 158, 0.15);
    --color-brand-tint-18:  rgba(21, 183, 158, 0.18);
    --color-brand-tint-20:  rgba(21, 183, 158, 0.20);
    --color-brand-tint-25:  rgba(21, 183, 158, 0.25);
    --color-brand-tint-28:  rgba(21, 183, 158, 0.28);
    --color-brand-tint-40:  rgba(22, 194, 163, 0.40);
    --color-brand-tint-45:  rgba(21, 183, 158, 0.45);
    --color-brand-aqua-tint-28: rgba(43, 203, 177, 0.28);

    --color-overlay-black-soft:   rgba(0, 0, 0, 0.10);
    --color-overlay-black-medium: rgba(0, 0, 0, 0.40);
    --color-overlay-black-strong: rgba(0, 0, 0, 0.45);

    --color-private-tint-12: rgba(212, 167, 44, 0.12);
    --color-danger-tint-25:  rgba(181, 71, 71, 0.25);
    --color-danger-tint-35:  rgba(181, 71, 71, 0.35);

    --gradient-corr-purple: linear-gradient(135deg, #7c3aed, #4f46e5);

    --color-status-pending:  rgba(199, 197, 87, 1);
    --color-status-approved: rgba(87, 199, 133, 1);
    --color-status-decided:  rgb(143 225 158);
    --color-status-deferred: rgb(255 174 117);
    --color-status-rejected: rgb(255 161 161);
    --color-status-noted:    rgb(204 255 213);
    --color-status-archived: rgb(87 199 173);

    --color-border-success-soft:   rgba(22, 163, 74, 0.15);
    --color-border-warning-soft:   rgba(245, 158, 11, 0.20);
    --color-border-danger-soft:    rgba(220, 38, 38, 0.15);
    --color-border-info-soft:      rgba(14, 165, 233, 0.15);
    --color-border-secondary-soft: rgba(37, 99, 235, 0.15);
    --color-border-memo-soft:      rgba(124, 58, 237, 0.15);

    --color-text-primary:   #0E1A2A;
    --color-text-secondary: #3F4D63;
    --color-text-tertiary:  #5A6A82;
    --color-text-muted:     #8895AB;
    --color-text-inverse:   #FFFFFF;

    --color-gray-50:  #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E5E9F0;
    --color-gray-300: #D1D7E2;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;

    --color-bg-page:    #F4F7FB;
    --color-bg-surface: #FFFFFF;
    --color-bg-subtle:  #F8FAFC;
    --color-bg-primary: var(--color-bg-surface);
    --color-bg-secondary: var(--color-bg-subtle);
    --color-bg-muted:   #F0F9F6;
    --color-bg-hover:   #ECF8F4;
    --color-bg-active:  #DEF6EE;
    --color-bg-section: #FBFEFD;
    --color-bg-input:   #FFFFFF;

    --color-border-default: #E1E6EE;
    --color-border:         var(--color-border-default);
    --color-border-light:   #EDF1F7;
    --color-border-strong:  #C9D2DF;
    --color-border-focus:   var(--coda-primary);

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.09);
    --shadow-lg: 0 14px 28px -4px rgba(15, 23, 42, 0.10), 0 6px 12px -6px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 24px 40px -6px rgba(15, 23, 42, 0.14), 0 10px 16px -8px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-card-hover: 0 14px 30px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 181, 160, 0.20);
    --shadow-header: 0 1px 3px rgba(15, 23, 42, 0.07);
    --shadow-sidebar: 2px 0 14px rgba(15, 23, 42, 0.05);
    --shadow-modal: 0 28px 56px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.05);
    --shadow-focus: 0 0 0 4px rgba(15, 181, 160, 0.18);

    --radius-px: 1px;    /* hairline — separators */
    --radius-2xs: 2px;   /* thin bars, dividers, progress tracks */
    --radius-3xs: 3px;   /* legend dots, small chips */
    --radius-xs: 4px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    --text-3xs: 11px;
    --text-2xs: 12px;
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 26px;
    --text-4xl: 34px;
    --text-kpi: 28px;       /* KPI and report display numbers */
    --text-display: 32px;   /* large branding/heading display text */

    --leading-none: 1;        /* KPI values, tight display numbers — no extra leading */
    --leading-compact: 1.2;   /* very tight — inbox tab labels */
    --leading-tight: 1.4;
    --leading-snug: 1.5;      /* tag chips — between tight and normal */
    --leading-normal: 1.65;
    --leading-relaxed: 1.82;

    --letter-spacing-tight:       0.1px;   /* small positive — buttons, login headings, KPI labels */
    --letter-spacing-base:        0.2px;   /* subtle tracking — table column headers */
    --letter-spacing-ui:          0.3px;   /* general UI labels, system name */
    --letter-spacing-wide:        0.5px;   /* drawer / dialog field labels */
    --letter-spacing-caps:        0.8px;   /* wide tracking — all-caps labels (sidebar, absolute px) */
    --letter-spacing-loose:       1.2px;   /* loose tracking — sidebar group caps headers */
    --letter-spacing-micro-em:    0.01em;  /* very subtle em — section titles, type badges */
    --letter-spacing-fine-em:     0.02em;  /* fine em — correspondence section title override */
    --letter-spacing-subtle-em:   0.03em;  /* subtle em — secondary section labels */
    --letter-spacing-caps-em:     0.05em;  /* wide tracking — all-caps labels that scale with font size */
    --letter-spacing-negative-sm: -0.1px;  /* slight tightening — subject lines */
    --letter-spacing-negative-md: -0.3px;  /* medium tightening — tab counts, detail titles */
    --letter-spacing-negative-lg: -1px;    /* large tightening — KPI values */

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 28px;
    --icon-2xl: 32px;
    --icon-3xl: 48px;

    --header-height: 60px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 0px;

    --z-raised: 1;           /* just above document flow — branding content, icons */
    --z-elevated: 2;         /* second stacking level — sticky headers, toggles */
    --z-sidebar: 10;         /* sidebar panel above page content */
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-popover: 400;        /* floating popovers — above sticky, below overlay */
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-loading: 3000;
    --z-above-all: 9999;     /* near-max stacking — autocomplete, critical floats */
    --z-system: 10000;       /* system-level forced-visible overlays */
    --z-progress-bar: 99999; /* router/page progress bar — above all layers */

    --duration-fastest: 0.15s;  /* very quick micro-interactions */
    --duration-quick: 0.18s;    /* fast icon/element animations */
    --duration-fast: 0.2s;      /* standard fast transitions */
    --duration-base: 0.25s;     /* base UI transitions */
    --duration-slow: 0.3s;      /* deliberate transitions */
    --duration-slower: 0.35s;   /* toast/panel entrance */
    --duration-slowest: 0.5s;   /* slow layout transitions */
    --duration-status: 2s;      /* status color fades — connection indicators */

    /* Print */
    --print-text-sm: 10pt;      /* audit/table body */
    --print-text-base: 12pt;    /* body copy in print */
    --print-text-display: 18pt; /* section title in print */

    /* Component layout line-heights (height-proxy trick for vertical centering) */
    --lh-gear-pseudo: 10px;      /* gear icon pseudo-element positioning */
    --lh-avatar-center: 2.5em;   /* em-based circle avatar centering */
    --lh-avatar-ring: 61px;      /* px-based ring element centering in 78px circle */

    --transition-fast: 0.2s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.3s ease;
    --transition-sidebar: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================
   WIDE DESKTOP — modest type-scale bump at 1440px+
   base: 15px → 16px (~6.7% increase), headings proportional
   ===================================================== */
@media (min-width: 1440px) {
    :root {
        --text-sm:      15px;
        --text-base:    16px;
        --text-md:      17px;
        --text-lg:      19px;
        --text-xl:      21px;
        --text-2xl:     26px;
        --text-3xl:     28px;
        --text-4xl:     36px;
        --text-kpi:     30px;
        --text-display: 34px;
    }
}

/* =====================================================
   DARK THEME — activated via <html data-theme="dark">
   ===================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;

    --coda-primary: #2BCBB1;
    --coda-primary-soft: #11302C;
    --coda-secondary: #5BDCC3;
    --coda-mint: #102B27;
    --coda-teal-deep: #5BDCC3;
    --coda-aqua-light: #0F2522;

    --brand-gradient: linear-gradient(135deg, #2BCBB1 0%, #1AAEDC 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(43,203,177,0.16) 0%, rgba(26,174,220,0.12) 100%);
    --brand-gradient-subtle: linear-gradient(135deg, #15201E 0%, #0F1B19 100%);
    --brand-gradient-vivid: linear-gradient(135deg, #2BCBB1 0%, #1AAEDC 100%);

    --color-primary-50:  #11302C;
    --color-primary-100: #133D37;
    --color-primary-200: #185045;
    --color-primary-300: #1F6A5B;
    --color-primary-400: #2BCBB1;
    --color-primary-500: #2BCBB1;
    --color-primary-600: #38D9C0;
    --color-primary-700: #5BDCC3;
    --color-primary-800: #93EAD8;
    --color-primary-900: #C5F6EC;

    --color-secondary-50:  #14233F;
    --color-secondary-100: #1B2E54;
    --color-secondary-200: #2C4378;
    --color-secondary-500: #5C9DF5;
    --color-secondary-600: #8FBCFA;
    --color-secondary-700: #C8DEFF;

    --color-success-50:  #11271C;
    --color-success-100: #15351E;
    --color-success-200: #1B4A2A;
    --color-success-500: #34C46B;
    --color-success-600: #4ED584;
    --color-success-700: #7DE3A2;
    --color-success-800: #A6E9C0;

    --color-warning-50:  #2D2208;
    --color-warning-100: #3B2C0A;
    --color-warning-200: #5A410E;
    --color-warning-300: #6F5417;
    --color-warning-500: #F8C146;
    --color-warning-600: #FBD176;
    --color-warning-700: #FDE3A1;
    --color-warning-800: #FCE38A;

    --color-danger-50:  #2E1414;
    --color-danger-100: #3D1818;
    --color-danger-200: #5A2222;
    --color-danger-500: #F26A66;
    --color-danger-600: #F58A87;
    --color-danger-700: #F9B6B6;
    --color-danger-800: #FCDCDC;

    --color-info-50:  #0E2434;
    --color-info-100: #133249;
    --color-info-200: #1B486B;
    --color-info-500: #4FC3E7;
    --color-info-600: #7AD2EE;
    --color-info-700: #A6E0F4;
    --color-info-800: #C7E8FB;

    --color-purple-50:  #1F1638;
    --color-purple-100: #2A1E4D;
    --color-purple-500: #A78BFA;
    --color-purple-600: #C4B0FB;
    --color-purple-700: #E0D3FF;

    --color-orange-50:  #2C1A0A;
    --color-orange-100: #3A220D;
    --color-orange-500: #F08646;
    --color-orange-600: #F4A06A;
    --color-orange-700: #F7BB91;
    --color-orange-800: #FCE0C2;

    --color-private:        #F2C95C;
    --color-private-soft:   #2D2208;
    --color-private-dark:   #FBD176;
    --color-private-border: #5A410E;
    --color-private-warm:   #3B2C0A;

    --color-memo:      #A78BFA;
    --color-memo-soft: #1F1638;
    --color-memo-dark: #C4B0FB;

    --color-incoming:      #34C46B;
    --color-incoming-soft: #11271C;
    --color-incoming-dark: #4ED584;

    --color-outgoing:      #4FC3E7;
    --color-outgoing-soft: #0E2434;
    --color-outgoing-dark: #7AD2EE;

    --color-admin:       #94A3B8;
    --color-admin-soft:  #1A2233;

    --color-text-primary:   #ECF1F8;
    --color-text-secondary: #B7C2D2;
    --color-text-tertiary:  #94A3B8;
    --color-text-muted:     #6E7B91;
    --color-text-inverse:   #0E1A2A;

    --color-gray-50:  #161E2C;
    --color-gray-100: #1A2233;
    --color-gray-200: #232D40;
    --color-gray-300: #2D3A52;
    --color-gray-400: #54627B;
    --color-gray-500: #7A8AA3;
    --color-gray-600: #9BA9C0;
    --color-gray-700: #C2CCDC;
    --color-gray-800: #DDE3EE;
    --color-gray-900: #ECF1F8;

    --color-bg-page:    #0B1220;
    --color-bg-surface: #141B2C;
    --color-bg-subtle:  #111827;
    --color-bg-primary: var(--color-bg-surface);
    --color-bg-secondary: var(--color-bg-subtle);
    --color-bg-muted:   #15202E;
    --color-bg-hover:   #1B2638;
    --color-bg-active:  #1F2E45;
    --color-bg-section: #161E2E;
    --color-bg-input:   #111827;

    --color-border-default: #232D40;
    --color-border:         var(--color-border-default);
    --color-border-light:   #1B2436;
    --color-border-strong:  #2D3A52;
    --color-border-focus:   var(--coda-primary);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 28px -4px rgba(0, 0, 0, 0.50), 0 6px 12px -6px rgba(0, 0, 0, 0.30);
    --shadow-xl: 0 24px 40px -6px rgba(0, 0, 0, 0.55), 0 10px 16px -8px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-card-hover: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(43, 203, 177, 0.30);
    --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.55);
    --shadow-sidebar: 2px 0 14px rgba(0, 0, 0, 0.45);
    --shadow-modal: 0 28px 56px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-focus: 0 0 0 4px rgba(43, 203, 177, 0.30);
}