/* Shared Africa Flying theme — matches landing/index.html.
   Default applied via html[data-theme] (cyberpunk unless localStorage says otherwise).
   Also aliases Sunset Sahara variable names so older pages restyle without a rewrite. */

:root {
    --theme-primary: #00f3ff;
    --theme-secondary: #ff00e5;
    --theme-accent: #00f3ff;
    --theme-glow: 0 0 20px rgba(0, 243, 255, 0.5);
    --theme-glow-hover: 0 0 40px rgba(0, 243, 255, 0.7);
    --theme-border-glow: 0 0 10px rgba(0, 243, 255, 0.3);
    --theme-bg-start: #0a0a0f;
    --theme-bg-end: #1a0a1a;
    --theme-card-bg: rgba(10, 10, 15, 0.8);
    --theme-text-primary: #f0f0ff;
    --theme-text-secondary: #b0b0d0;
    --theme-text-muted: #8080a0;
    --theme-nav-bg: rgba(10, 10, 15, 0.9);
    --theme-nav-border: rgba(0, 243, 255, 0.2);
    --theme-footer-bg: #050508;
    --theme-input-bg: rgba(0, 243, 255, 0.08);
    --theme-input-border: rgba(0, 243, 255, 0.2);
    --theme-input-text: #f0f0ff;
    --theme-chat-bg: rgba(10, 10, 15, 0.8);
    --theme-message-bg: rgba(0, 243, 255, 0.1);
    --theme-message-user: #00f3ff;
    --theme-message-user-text: #0a0a0f;
    --theme-border-color: rgba(0, 243, 255, 0.15);
    --theme-shadow: 0 8px 32px rgba(0, 243, 255, 0.15);
    --theme-shadow-hover: 0 12px 48px rgba(0, 243, 255, 0.25);
    --theme-radius: 20px;
    --theme-radius-sm: 12px;
    --theme-link: #00f3ff; --theme-text-soft: #8080a0; --theme-on-primary: #0a0a0f;
    --theme-link-alt: #ff4df0; --theme-ok: #4ade80; --theme-warn: #fbbf24; --theme-bad: #f87171;
    --backdrop-blur: blur(20px);
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="cyberpunk"] {
    --theme-primary: #00f3ff; --theme-secondary: #ff00e5; --theme-accent: #00f3ff;
    --theme-glow: 0 0 30px rgba(0, 243, 255, 0.6);
    --theme-glow-hover: 0 0 60px rgba(0, 243, 255, 0.9);
    --theme-border-glow: 0 0 15px rgba(0, 243, 255, 0.4);
    --theme-bg-start: #0a0a0f; --theme-bg-end: #1a0a1a;
    --theme-card-bg: rgba(10, 10, 15, 0.8);
    --theme-text-primary: #f0f0ff; --theme-text-secondary: #b0b0d0; --theme-text-muted: #8080a0;
    --theme-nav-bg: rgba(10, 10, 15, 0.9); --theme-nav-border: rgba(0, 243, 255, 0.2);
    --theme-footer-bg: #050508;
    --theme-input-bg: rgba(0, 243, 255, 0.08); --theme-input-border: rgba(0, 243, 255, 0.2); --theme-input-text: #f0f0ff;
    --theme-border-color: rgba(0, 243, 255, 0.15);
    --theme-shadow: 0 8px 32px rgba(0, 243, 255, 0.15);
    --theme-shadow-hover: 0 12px 48px rgba(0, 243, 255, 0.25);
    --theme-chat-bg: rgba(10, 10, 15, 0.8); --theme-message-bg: rgba(0, 243, 255, 0.1); --theme-message-user: #00f3ff; --theme-message-user-text: #0a0a0f;
    --theme-link: #00f3ff; --theme-text-soft: #8080a0; --theme-on-primary: #0a0a0f;
    --theme-link-alt: #ff4df0; --theme-ok: #4ade80; --theme-warn: #fbbf24; --theme-bad: #f87171;
}
[data-theme="solar"] {
    --theme-primary: #ff6b35; --theme-secondary: #f7931e; --theme-accent: #ff6b35;
    --theme-glow: 0 0 30px rgba(255, 107, 53, 0.5);
    --theme-glow-hover: 0 0 60px rgba(255, 107, 53, 0.7);
    --theme-border-glow: 0 0 15px rgba(255, 107, 53, 0.3);
    --theme-bg-start: #1a0f0a; --theme-bg-end: #2a1a12;
    --theme-card-bg: rgba(40, 25, 15, 0.8);
    --theme-text-primary: #f5e6d3; --theme-text-secondary: #d4b8a0; --theme-text-muted: #b08a70;
    --theme-nav-bg: rgba(26, 15, 10, 0.9); --theme-nav-border: rgba(255, 107, 53, 0.2);
    --theme-footer-bg: #0a0503;
    --theme-input-bg: rgba(255, 107, 53, 0.08); --theme-input-border: rgba(255, 107, 53, 0.2); --theme-input-text: #f5e6d3;
    --theme-border-color: rgba(255, 107, 53, 0.15);
    --theme-shadow: 0 8px 32px rgba(255, 107, 53, 0.15);
    --theme-shadow-hover: 0 12px 48px rgba(255, 107, 53, 0.25);
    --theme-chat-bg: rgba(40, 25, 15, 0.8); --theme-message-bg: #3a2518; --theme-message-user: #ff6b35; --theme-message-user-text: #fff;
    --theme-link: #ff6b35; --theme-text-soft: #b08a70; --theme-on-primary: #1a0f0a;
    --theme-link-alt: #f7931e; --theme-ok: #4ade80; --theme-warn: #fbbf24; --theme-bad: #f87171;
}
[data-theme="aurora"] {
    --theme-primary: #7b2ffc; --theme-secondary: #00d4ff; --theme-accent: #7b2ffc;
    --theme-glow: 0 0 30px rgba(123, 47, 252, 0.6);
    --theme-glow-hover: 0 0 60px rgba(123, 47, 252, 0.8);
    --theme-border-glow: 0 0 15px rgba(123, 47, 252, 0.4);
    --theme-bg-start: #0f0a1a; --theme-bg-end: #1a0f2a;
    --theme-card-bg: rgba(15, 10, 26, 0.8);
    --theme-text-primary: #e8d5ff; --theme-text-secondary: #b8a0d0; --theme-text-muted: #8870a0;
    --theme-nav-bg: rgba(15, 10, 26, 0.9); --theme-nav-border: rgba(123, 47, 252, 0.2);
    --theme-footer-bg: #0a0515;
    --theme-input-bg: rgba(123, 47, 252, 0.08); --theme-input-border: rgba(123, 47, 252, 0.2); --theme-input-text: #e8d5ff;
    --theme-border-color: rgba(123, 47, 252, 0.15);
    --theme-shadow: 0 8px 32px rgba(123, 47, 252, 0.15);
    --theme-shadow-hover: 0 12px 48px rgba(123, 47, 252, 0.25);
    --theme-chat-bg: rgba(15, 10, 26, 0.8); --theme-message-bg: rgba(123, 47, 252, 0.1); --theme-message-user: #7b2ffc; --theme-message-user-text: #fff;
    --theme-link: #a78bfa; --theme-text-soft: #a38fc0; --theme-on-primary: #ffffff;
    --theme-link-alt: #00d4ff; --theme-ok: #4ade80; --theme-warn: #fbbf24; --theme-bad: #f87171;
}
[data-theme="dark"] {
    --theme-primary: #2563eb; --theme-secondary: #60a5fa; --theme-accent: #2563eb;
    --theme-glow: 0 0 20px rgba(37, 99, 235, 0.4);
    --theme-glow-hover: 0 0 40px rgba(37, 99, 235, 0.6);
    --theme-border-glow: 0 0 10px rgba(37, 99, 235, 0.2);
    --theme-bg-start: #0b1424; --theme-bg-end: #1a2436;
    --theme-card-bg: rgba(11, 20, 36, 0.8);
    --theme-text-primary: #e8edf5; --theme-text-secondary: #a8b8d0; --theme-text-muted: #7888a0;
    --theme-nav-bg: rgba(11, 20, 36, 0.9); --theme-nav-border: rgba(37, 99, 235, 0.15);
    --theme-footer-bg: #050810;
    --theme-input-bg: rgba(37, 99, 235, 0.08); --theme-input-border: rgba(37, 99, 235, 0.2); --theme-input-text: #e8edf5;
    --theme-border-color: rgba(37, 99, 235, 0.12);
    --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --theme-shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.6);
    --theme-chat-bg: rgba(11, 20, 36, 0.8); --theme-message-bg: #1a2a40; --theme-message-user: #2563eb; --theme-message-user-text: #fff;
    --theme-link: #60a5fa; --theme-text-soft: #8c9db8; --theme-on-primary: #ffffff;
    --theme-link-alt: #38bdf8; --theme-ok: #4ade80; --theme-warn: #fbbf24; --theme-bad: #f87171;
}
[data-theme="light"] {
    --theme-primary: #2563eb; --theme-secondary: #3b82f6; --theme-accent: #2563eb;
    --theme-glow: 0 0 20px rgba(37, 99, 235, 0.2);
    --theme-glow-hover: 0 0 40px rgba(37, 99, 235, 0.3);
    --theme-border-glow: 0 0 10px rgba(37, 99, 235, 0.1);
    --theme-bg-start: #f0f2f5; --theme-bg-end: #e4e8ee;
    --theme-card-bg: rgba(255, 255, 255, 0.72);
    --theme-text-primary: #1a2332; --theme-text-secondary: #4a5a6a; --theme-text-muted: #7a8a9a;
    --theme-nav-bg: rgba(255, 255, 255, 0.85); --theme-nav-border: rgba(0, 0, 0, 0.08);
    --theme-footer-bg: #0b1424;
    --theme-input-bg: rgba(255, 255, 255, 0.5); --theme-input-border: rgba(0, 0, 0, 0.15); --theme-input-text: #1a2332;
    --theme-border-color: rgba(0, 0, 0, 0.1);
    --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --theme-shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.12);
    --theme-chat-bg: rgba(255, 255, 255, 0.72); --theme-message-bg: #e8ecf0; --theme-message-user: #2563eb; --theme-message-user-text: #fff;
    --theme-link: #1d4ed8; --theme-text-soft: #566474; --theme-on-primary: #ffffff;
    --theme-link-alt: #115e59; --theme-ok: #166534; --theme-warn: #92400e; --theme-bad: #b91c1c;
}

/* Map old Sunset Sahara tokens onto the live theme */
html[data-theme] {
    --bg-primary: var(--theme-bg-start);
    --bg-secondary: var(--theme-bg-end);
    --bg-card: var(--theme-card-bg);
    --glass-bg: var(--theme-card-bg);
    --card-bg: var(--theme-card-bg);
    --text-primary: var(--theme-text-primary);
    --text-secondary: var(--theme-text-secondary);
    --text-muted: var(--theme-text-soft);
    --border-color: var(--theme-border-color);
    --shadow: var(--theme-shadow);
    --shadow-hover: var(--theme-shadow-hover);
    --nav-bg: var(--theme-nav-bg);
    --nav-border: var(--theme-nav-border);
    --footer-bg: var(--theme-footer-bg);
    --accent-orange: var(--theme-primary);
    --accent-gold: var(--theme-secondary);
    --accent-deep: var(--theme-primary);
    --accent-sunrise: var(--theme-secondary);
    --accent-brown: var(--theme-text-muted);
    --accent-red: #c0392b;
    --icon-color: var(--theme-primary);
    --glass-border: 1px solid var(--theme-border-color);
}

/* Legacy page tokens (blog, careers, compare, demo, docs, press, privacy, status, about).
   Those pages define their own Sunset Sahara names in :root; html[data-theme] wins over :root and
   over their per-theme blocks, so every theme reaches them through the same variables. */
html[data-theme] {
    --job-bg: var(--theme-card-bg);
    --chart-bg: var(--theme-card-bg);
    --doc-card-bg: var(--theme-card-bg);
    --edu-stat-bg: var(--theme-card-bg);
    --press-item-bg: var(--theme-card-bg);
    --media-logo-bg: var(--theme-card-bg);
    --gauge-bg: var(--theme-card-bg);
    --loading-bg: var(--theme-card-bg);
    --highlight-bg: var(--theme-card-bg);
    --education-highlight-bg: var(--theme-card-bg);
    --education-card-bg-start: var(--theme-card-bg);
    --education-card-bg-end: var(--theme-card-bg);
    --map-bg: var(--theme-bg-end);
    --table-stripe: color-mix(in srgb, var(--theme-text-primary) 5%, transparent);
    --tag-bg: color-mix(in srgb, var(--theme-primary) 14%, transparent);
    --type-bg: color-mix(in srgb, var(--theme-primary) 14%, transparent);
    --education-tag-bg: color-mix(in srgb, var(--theme-primary) 14%, transparent);
    --education-type-bg: color-mix(in srgb, var(--theme-primary) 14%, transparent);
    --tag-text: var(--theme-link);
    --type-text: var(--theme-link);
    --education-tag-text: var(--theme-link);
    --education-type-text: var(--theme-link);
    --media-logo-text: var(--theme-link);
    --education-accent: var(--theme-link);
    --education-color: var(--theme-link);
    --education-job-hover: var(--theme-link);
    --teal-color: var(--theme-link);
    --soma-color: var(--theme-link-alt);
    --soma-glow: color-mix(in srgb, var(--theme-primary) 25%, transparent);
    --online-color: var(--theme-ok);
    --offline-color: var(--theme-bad);
    --degraded-color: var(--theme-warn);
    --unknown-color: var(--theme-text-soft);
    --loading-color: var(--theme-link);
    --px4-color: var(--theme-warn);
    --ros2-color: var(--theme-link-alt);
}

html[data-theme] body {
    background: var(--theme-bg-start) !important;
    color: var(--theme-text-primary);
}

.theme-selector { position: relative; display: inline-block; }
.theme-selector > button {
    background: transparent; border: 1px solid var(--theme-border-color); border-radius: 40px;
    padding: 4px 12px; cursor: pointer; font-size: 0.75rem; color: var(--theme-text-primary);
    display: flex; align-items: center; gap: 5px; font-family: inherit;
}
.theme-selector > button:hover { border-color: var(--theme-primary); }
.theme-selector-content {
    display: none; position: absolute; top: 100%; right: 0; z-index: 1001;
    background: var(--theme-card-bg); backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--theme-border-color); border-radius: 12px;
    box-shadow: var(--theme-shadow); padding: 8px; min-width: 140px; margin-top: 4px;
}
.theme-selector:hover .theme-selector-content, .theme-selector:focus-within .theme-selector-content { display: block; }
.theme-option {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px;
    cursor: pointer; font-size: 0.75rem; color: var(--theme-text-secondary);
    border: none; background: transparent; width: 100%; font-family: inherit;
}
.theme-option:hover { background: color-mix(in srgb, var(--theme-primary) 12%, transparent); color: var(--theme-text-primary); }
.theme-option .color-preview { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--theme-border-color); }

.lang-selector { position: relative; display: inline-block; }
.lang-selector > button {
    background: transparent; border: 1px solid var(--theme-border-color); border-radius: 40px;
    padding: 4px 12px; cursor: pointer; font-size: 0.75rem; color: var(--theme-text-primary);
    display: flex; align-items: center; gap: 5px; font-family: inherit;
}
.lang-dropdown {
    display: none; position: absolute; top: 100%; right: 0; z-index: 1001;
    background: var(--theme-card-bg); border: 1px solid var(--theme-border-color);
    border-radius: 12px; padding: 8px; min-width: 130px; margin-top: 4px;
}
.lang-dropdown.open { display: block; }
.lang-option {
    display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 6px;
    cursor: pointer; font-size: 0.75rem; color: var(--theme-text-secondary);
    border: none; background: transparent; width: 100%;
}

header .header-link, .header-link {
    color: var(--theme-text-secondary); padding: 4px 12px; border-radius: 40px;
    text-decoration: none; font-size: 0.75rem; font-weight: 500;
    border: 1px solid var(--theme-border-color);
}
header .header-link:hover, .header-link:hover {
    background: var(--theme-primary); color: var(--theme-on-primary); border-color: var(--theme-primary);
}

.af-page {
    max-width: 1100px; margin: 0 auto; padding: 88px 24px 48px;
}
.af-page h1 {
    font-family: Orbitron, Inter, sans-serif; font-size: 1.8rem; margin-bottom: 8px;
    color: var(--theme-text-primary);
}
.af-page .lede { color: var(--theme-text-soft); margin-bottom: 24px; border-left: 3px solid var(--theme-primary); padding-left: 12px; }
.af-card {
    background: var(--theme-card-bg); border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-radius-sm); padding: 20px; margin-bottom: 16px;
    box-shadow: var(--theme-shadow);
}
.af-card h2 { font-size: 1.05rem; margin-bottom: 8px; color: var(--theme-text-primary); }
.af-card p, .af-card li { color: var(--theme-text-secondary); font-size: 0.95rem; }
.af-card a { color: var(--theme-link); }
.af-page a:not([class]) { color: var(--theme-link); }
.af-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.af-kpi { background: var(--theme-card-bg); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 16px; text-align: center; }
.af-kpi .n { font-family: Orbitron, sans-serif; font-size: 1.6rem; color: var(--theme-link); display: block; }
.af-kpi .l { font-size: 0.75rem; color: var(--theme-text-soft); }

.af-overlay-nav {
    position: fixed; top: 12px; left: 12px; right: 12px; z-index: 50;
    display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none;
}
.af-overlay-nav > * { pointer-events: auto; }
.af-overlay-nav .logo {
    font-family: Orbitron, sans-serif; font-size: 0.9rem; color: var(--theme-text-primary);
    background: var(--theme-nav-bg); border: 1px solid var(--theme-nav-border);
    padding: 8px 14px; border-radius: 40px; text-decoration: none;
}
.af-overlay-nav .logo i { color: var(--theme-primary); margin-right: 6px; }

footer.af-footer, .af-footer {
    background: var(--theme-footer-bg); padding: 20px 24px; border-top: 1px solid var(--theme-border-color);
    color: var(--theme-text-muted); font-size: 0.8rem;
}
.af-footer a { color: var(--theme-text-muted); text-decoration: none; margin-right: 14px; }
.af-footer a:hover { color: var(--theme-primary); }

/* RTL chrome (Arabic) — keep Soma widget CSS untouched */
html[dir="rtl"] .theme-selector-content,
html[dir="rtl"] .lang-dropdown { right: auto; left: 0; }
html[dir="rtl"] body { text-align: start; }

/* Images (docs/IMAGE_CONVENTIONS.md): real imagery, alt text, credit line, lazy loading, graceful fallback. */
.af-figure { margin: 20px 0; }
.af-figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--theme-border-color); background: var(--theme-card-bg); }
.af-figure figcaption { margin-top: 8px; color: var(--theme-text-soft); font-size: 0.85rem; line-height: 1.5; }
.af-figure .af-credit { display: block; margin-top: 2px; color: var(--theme-text-muted); font-size: 0.78rem; }
.af-figure .af-credit a { color: var(--theme-link); }
.af-figure.af-figure-detail { opacity: 0.95; }
.af-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 1000px; margin: 16px auto; text-align: left; }
.af-figures .af-figure { margin: 0; }
.af-figures .af-figure img { max-height: 460px; object-fit: contain; }
.af-img-fallback { display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 16px; text-align: center; border-radius: 12px; border: 1px dashed var(--theme-border-color); background: var(--theme-card-bg); color: var(--theme-text-soft); font-size: 0.85rem; }
.af-card h2.af-h { font-size: 1.15rem; margin: 22px 0 8px; color: var(--theme-text-primary); }
.af-card ul.af-list { margin: 0 0 12px 20px; }