/* =========================================================================
 * Cairo Interactive Map — Shared Theme Tokens
 * Color values are RGB triplets so Tailwind alpha modifiers (e.g. /50)
 * keep working when the variables are swapped.
 * ========================================================================= */

:root {
    /* --- Dark theme (default) ----------------------------------------- */
    --primary: 229 196 135;
    --primary-fixed: 255 222 163;
    --primary-fixed-dim: 227 194 133;
    --primary-container: 200 169 110;
    --on-primary: 64 45 0;
    --on-primary-container: 83 61 12;
    --on-primary-fixed: 38 25 0;
    --on-primary-fixed-variant: 89 67 18;
    --inverse-primary: 115 91 40;

    --surface: 24 18 13;
    --surface-container-lowest: 18 13 9;
    --surface-container-low: 32 26 21;
    --surface-container: 37 30 25;
    --surface-container-high: 47 41 35;
    --surface-container-highest: 58 51 46;
    --surface-bright: 63 56 50;
    --surface-dim: 24 18 13;
    --surface-variant: 58 51 46;
    --surface-tint: 227 194 133;

    --on-surface: 237 224 215;
    --on-surface-variant: 208 197 181;
    --on-background: 237 224 215;
    --inverse-surface: 237 224 215;
    --inverse-on-surface: 54 47 41;

    --outline: 153 143 129;
    --outline-variant: 77 70 58;
    --text-dim: 168 148 118;
    --text-primary: 224 215 198;

    --bg-deep: 15 10 6;
    --bg-card: 24 17 9;
    --background: 24 18 13;

    --status-plum: 114 47 55;

    --tertiary: 220 197 165;
    --tertiary-container: 191 170 139;
    --tertiary-fixed: 247 223 189;
    --tertiary-fixed-dim: 218 195 163;
    --on-tertiary: 60 46 23;
    --on-tertiary-container: 77 62 38;
    --on-tertiary-fixed: 37 26 5;
    --on-tertiary-fixed-variant: 84 68 44;

    --secondary: 255 178 184;
    --secondary-container: 117 49 57;
    --secondary-fixed: 255 218 219;
    --secondary-fixed-dim: 255 178 184;
    --on-secondary: 88 27 36;
    --on-secondary-container: 247 156 163;
    --on-secondary-fixed: 60 6 16;
    --on-secondary-fixed-variant: 117 49 57;

    --error: 255 180 171;
    --error-container: 147 0 10;
    --on-error: 105 0 5;
    --on-error-container: 255 218 214;

    /* Pre-mixed alpha colors that don't need Tailwind modifiers */
    --gold-glow: rgba(226, 196, 137, 0.08);
    --gold-faint: rgba(200, 169, 110, 0.18);
    --halo-color: rgba(229, 196, 135, 0.05);
    --gold-text-gradient: linear-gradient(135deg, #e5c487 0%, #c8a96e 100%);
    --primary-button-gradient: linear-gradient(180deg, #e2c489 0%, #c8a96e 100%);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5);
    --card-shadow: inset 0 1px 0 0 rgba(226, 196, 137, 0.08);
    --card-shadow-hover: inset 0 1px 0 0 rgba(226, 196, 137, 0.15), 0 12px 24px -8px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}

[data-theme="light"] {
    --primary: 139 94 60;
    --primary-fixed: 107 68 35;
    --primary-fixed-dim: 139 94 60;
    --primary-container: 247 223 189;
    --on-primary: 255 255 255;
    --on-primary-container: 44 29 16;
    --on-primary-fixed: 255 255 255;
    --on-primary-fixed-variant: 44 29 16;
    --inverse-primary: 227 194 133;

    --surface: 251 246 236;
    --surface-container-lowest: 255 255 255;
    --surface-container-low: 245 239 226;
    --surface-container: 240 232 214;
    --surface-container-high: 233 223 201;
    --surface-container-highest: 221 209 180;
    --surface-bright: 255 255 255;
    --surface-dim: 236 229 213;
    --surface-variant: 226 214 188;
    --surface-tint: 139 94 60;

    --on-surface: 44 29 16;
    --on-surface-variant: 74 61 44;
    --on-background: 44 29 16;
    --inverse-surface: 44 29 16;
    --inverse-on-surface: 245 239 226;

    --outline: 120 102 80;
    --outline-variant: 184 168 136;
    --text-dim: 110 93 68;
    --text-primary: 44 29 16;

    --bg-deep: 240 232 214;
    --bg-card: 245 239 226;
    --background: 251 246 236;

    --status-plum: 90 31 37;

    --tertiary: 107 68 35;
    --tertiary-container: 216 200 150;
    --tertiary-fixed: 139 94 60;
    --tertiary-fixed-dim: 184 168 136;
    --on-tertiary: 255 255 255;
    --on-tertiary-container: 44 29 16;
    --on-tertiary-fixed: 255 255 255;
    --on-tertiary-fixed-variant: 74 61 44;

    --secondary: 180 84 78;
    --secondary-container: 255 217 214;
    --secondary-fixed: 255 217 214;
    --secondary-fixed-dim: 216 168 164;
    --on-secondary: 255 255 255;
    --on-secondary-container: 105 0 8;
    --on-secondary-fixed: 65 0 6;
    --on-secondary-fixed-variant: 116 51 58;

    --error: 186 26 26;
    --error-container: 255 218 214;
    --on-error: 255 255 255;
    --on-error-container: 65 0 2;

    --gold-glow: rgba(139, 94, 60, 0.08);
    --gold-faint: rgba(139, 94, 60, 0.14);
    --halo-color: rgba(139, 94, 60, 0.07);
    --gold-text-gradient: linear-gradient(135deg, #8b5e3c 0%, #5a3a1f 100%);
    --primary-button-gradient: linear-gradient(180deg, #b88654 0%, #8b5e3c 100%);

    --shadow-sm: 0 1px 2px rgba(74, 44, 15, 0.12);
    --shadow-md: 0 4px 14px rgba(74, 44, 15, 0.16);
    --shadow-lg: 0 12px 36px rgba(74, 44, 15, 0.2);
    --card-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
    --card-shadow-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.7), 0 12px 24px -8px rgba(74, 44, 15, 0.18);

    color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(var(--surface));
    color: rgb(var(--on-surface));
}
body { overflow-x: hidden; }

/* Smooth swap when toggling */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
}

/* --- Theme toggle button ---------------------------------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid rgb(var(--primary) / 0.3);
    border-radius: 10px;
    color: rgb(var(--primary));
    cursor: pointer;
    transition: background 0.16s ease, transform 0.12s ease, border-color 0.16s ease;
    padding: 0;
    line-height: 1;
}
.theme-toggle:hover {
    background: rgb(var(--primary) / 0.1);
    border-color: rgb(var(--primary) / 0.5);
    transform: translateY(-1px);
}
.theme-toggle:active { transform: translateY(0); }
.theme-toggle .material-symbols-outlined { font-size: 20px; }

/* --- Shared utilities used across the library pages -------------------- */
.gold-text-gradient {
    background: var(--gold-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.halo-effect::before {
    content: "";
    position: fixed;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 600px;
    background: radial-gradient(circle, var(--halo-color) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.mamluk-card {
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
    box-shadow: var(--card-shadow);
}
.mamluk-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgb(var(--surface-container-lowest)); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--outline-variant)); border-radius: 2px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--outline)); }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.ornament-rule {
    display: block;
    width: 72px;
    height: 2px;
    background: linear-gradient(90deg, rgb(var(--primary)) 0%, transparent 100%);
    margin: 1rem 0 1.25rem;
}

@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton, .card-skeleton {
    background: linear-gradient(90deg,
        rgb(var(--surface-container)) 0px,
        rgb(var(--surface-container-high)) 200px,
        rgb(var(--surface-container)) 400px);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 0.5rem;
}

/* Quote block used on inscription cards */
.arabic-excerpt {
    position: relative;
    padding: 0.6rem 0.8rem;
    background: rgb(var(--primary) / 0.05);
    border-right: 2px solid rgb(var(--primary) / 0.35);
    border-radius: 0.25rem;
}

/* ─── MapLibre Navigation Control (themed) ──────────────────────────────── */
.maplibregl-ctrl-top-left { top: 16px; left: 16px; }
.maplibregl-ctrl-bottom-right { bottom: 16px; right: 16px; }

.maplibregl-ctrl-group {
    background: linear-gradient(160deg, rgba(28, 18, 8, 0.96) 0%, rgba(44, 29, 16, 0.96) 100%) !important;
    border: 1px solid rgb(var(--primary) / 0.25) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}

.maplibregl-ctrl-group button {
    width: 34px !important;
    height: 34px !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgb(var(--primary) / 0.15) !important;
    transition: background-color 0.18s ease;
}
.maplibregl-ctrl-group button:last-child { border-bottom: none !important; }
.maplibregl-ctrl-group button:hover {
    background-color: rgb(var(--primary) / 0.12) !important;
}
.maplibregl-ctrl-group button:focus {
    box-shadow: inset 0 0 0 2px rgb(var(--primary) / 0.5) !important;
}

/* Recolor the SVG icons to the amber palette. */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
    filter: invert(78%) sepia(28%) saturate(420%) hue-rotate(353deg) brightness(94%) contrast(88%);
}