/* Exotech brand tokens + shared components (measured from exoDrive 2026-10-04). */
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/IBMPlexSansArabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/IBMPlexSansArabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/IBMPlexSansArabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --exo-navy: #0A2142;
  --exo-navy-2: #12305C;
  --exo-green: #1EA362;
  --exo-green-dark: #178A52;
  --exo-green-soft: #E3F4EB;
  --exo-text: #0A2142;
  --exo-text-2: #4A5B78;
  --exo-line: #DDE3EC;
  --exo-bg: #F4F6FA;
  --exo-radius: 8px;
  --exo-font: "Poppins", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  /* Dark palette, shared by exoMail (html.dark-mode) and exoChat (.cpd-theme-dark). Text contrast on surface: 14:1 / 8:1 / 5.8:1. */
  --exo-dark-bg: #071426;        /* page, timeline, inset inputs */
  --exo-dark-surface: #0D1F3A;   /* panels, dialogs */
  --exo-dark-raised: #132A4D;    /* hover, popovers */
  --exo-dark-selected: #12382A;  /* selected row (green-tinted) */
  --exo-dark-line: #1F3658;
  --exo-dark-line-2: #2E4B78;    /* input borders */
  --exo-dark-text: #E8EEF7;
  --exo-dark-text-2: #A9B6CC;
  --exo-dark-muted: #8C9AB3;
  --exo-dark-green-text: #3CC583; /* green text/icons on dark; fills stay --exo-green */
}
exo-topbar { display: block; }
[dir="rtl"] { --exo-font: "IBM Plex Sans Arabic", "Poppins", "Segoe UI", system-ui, sans-serif; }

.exo-topbar { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 16px; background: var(--exo-navy);
  color: #fff; font-family: var(--exo-font); box-sizing: border-box; }
.exo-topbar .exo-spacer { flex: 1; }
.exo-wordmark { height: 26px; color: #fff; display: block; }
.exo-btn-outline { border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; border-radius: var(--exo-radius);
  padding: 6px 12px; font: 500 13px var(--exo-font); cursor: pointer; }
.exo-btn-outline:hover { background: rgba(255,255,255,.08); }
.exo-launcher { position: relative; }
.exo-launcher-btn { width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; border-radius: var(--exo-radius); }
.exo-launcher-btn:hover, .exo-launcher-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); }
.exo-launcher-menu { position: absolute; inset-inline-start: 0; top: 44px; z-index: 10000; display: grid; grid-template-columns: repeat(2, 120px);
  gap: 8px; padding: 12px; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(10,33,66,.25); }
.exo-launcher-menu a { display: grid; gap: 6px; justify-items: center; padding: 12px 8px; border-radius: var(--exo-radius); color: var(--exo-text);
  text-decoration: none; font: 500 13px var(--exo-font); }
.exo-launcher-menu a:hover, .exo-launcher-menu a[aria-current="page"] { background: var(--exo-green-soft); }
.exo-app-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--exo-navy); color: #fff; display: grid; place-items: center; font: 600 15px var(--exo-font); }
.exo-app-icon img { width: 36px; height: 36px; display: block; } /* the same icons as the desktop apps (icons/<app>.svg) */
.exo-app-icon.is-current { box-shadow: 0 0 0 2px var(--exo-green); }
.exo-launcher-menu[hidden] { display: none; }
.exo-launcher-menu .exo-install { grid-column: 1 / -1; border: 1px solid var(--exo-line); background: #fff; color: var(--exo-text);
  border-radius: var(--exo-radius); padding: 8px; font: 500 13px var(--exo-font); cursor: pointer; }
.exo-launcher-menu .exo-install:hover { background: var(--exo-green-soft); }
.exo-launcher-menu .exo-install[hidden] { display: none; }