/* ========================================
   ATLAS THEMES — 4 темы рабочей области
   (ТЗ Атлас v1.0 §7.2, паттерн Мактабы)

   Атрибут data-atlas-theme на корне .atl-root.
   localStorage-ключ: atlas-theme (js/atlas-app.js).
   Темы: parchment (дефолт) / slate / sepia-dark / night.

   Токены ТЗ: --atl-sea, --atl-land, --atl-grid,
   --atl-region-fill, --atl-region-stroke,
   --atl-city, --atl-city-label, --atl-text, --atl-panel-bg, --atl-border,
   --atl-p-prophet, --atl-p-sahabi, --atl-p-tabii, --atl-p-taba,
   --atl-p-era1, --atl-p-era2, --atl-p-era3,
   --atl-edge-suhba, --atl-edge-ilm, --atl-edge-tarbiya, --atl-edge-riwaya,
   --atl-silsila
   + служебные: --atl-bg, --atl-bg-elevated, --atl-text-muted,
   --atl-accent, --atl-accent-bg, --atl-shadow, --atl-shadow-elev, --atl-overlay
   ======================================== */

/* ── PARCHMENT — светло-бежевая (дефолт) ── */
.atl-root[data-atlas-theme="parchment"] {
    --atl-bg:           #F1E9D6;
    --atl-bg-elevated:  #F9F3E3;
    --atl-panel-bg:     #FAF5E8;
    --atl-text:         #3D3122;
    --atl-text-muted:   #7C6B50;
    --atl-accent:       #8B6F47;
    --atl-accent-bg:    rgba(139, 111, 71, 0.08);
    --atl-border:       #E0D3B4;
    --atl-shadow:       0 2px 10px rgba(120, 95, 60, 0.10);
    --atl-shadow-elev:  0 8px 28px rgba(120, 95, 60, 0.18);
    --atl-overlay:      rgba(61, 49, 34, 0.45);

    /* карта: море чуть темнее суши, сетка на 4-6% темнее моря */
    --atl-sea:          #D3C299;
    --atl-land:         #F5EDD9;
    --atl-grid:         #C6B489;
    --atl-region-fill:  rgba(139, 111, 71, 0.08);
    --atl-region-stroke:#A98C60;
    --atl-city:         #6B573B;
    --atl-city-label:   #55452E;

    /* эпохи (кружки личностей) */
    --atl-p-prophet:    #1F7A46;
    --atl-p-sahabi:     #B8860B;
    --atl-p-tabii:      #2A7B9B;
    --atl-p-taba:       #7B4FA6;
    --atl-p-era1:       #C05A2E;
    --atl-p-era2:       #B03A5B;
    --atl-p-era3:       #5C7A33;

    /* стрелки связей */
    --atl-edge-suhba:   #1F6B3A;
    --atl-edge-ilm:     #2A6F9B;
    --atl-edge-tarbiya: #8A5CA8;
    --atl-edge-riwaya:  #A08A5F;
    --atl-silsila:      #C9A227;
}

/* ── SLATE — светло-серая ── */
.atl-root[data-atlas-theme="slate"] {
    --atl-bg:           #ECEFF1;
    --atl-bg-elevated:  #F7F9FA;
    --atl-panel-bg:     #FAFBFC;
    --atl-text:         #2B3138;
    --atl-text-muted:   #68737F;
    --atl-accent:       #476A8C;
    --atl-accent-bg:    rgba(71, 106, 140, 0.08);
    --atl-border:       #D6DCE2;
    --atl-shadow:       0 2px 10px rgba(45, 60, 75, 0.10);
    --atl-shadow-elev:  0 8px 28px rgba(45, 60, 75, 0.18);
    --atl-overlay:      rgba(43, 49, 56, 0.45);

    --atl-sea:          #C3CFD9;
    --atl-land:         #F3F5F7;
    --atl-grid:         #B4C2CE;
    --atl-region-fill:  rgba(71, 106, 140, 0.07);
    --atl-region-stroke:#8DA1B4;
    --atl-city:         #4E5A66;
    --atl-city-label:   #3A444E;

    --atl-p-prophet:    #1E7B45;
    --atl-p-sahabi:     #B58900;
    --atl-p-tabii:      #2679A0;
    --atl-p-taba:       #7A4FA8;
    --atl-p-era1:       #C25730;
    --atl-p-era2:       #B03A5B;
    --atl-p-era3:       #5B7A35;

    --atl-edge-suhba:   #1F6B3A;
    --atl-edge-ilm:     #2A6F9B;
    --atl-edge-tarbiya: #8A5CA8;
    --atl-edge-riwaya:  #8C8270;
    --atl-silsila:      #C9A227;
}

/* ── SEPIA-DARK — коричневая тёмная ── */
.atl-root[data-atlas-theme="sepia-dark"] {
    --atl-bg:           #2A211A;
    --atl-bg-elevated:  #342A20;
    --atl-panel-bg:     #382D22;
    --atl-text:         #D9C6A6;
    --atl-text-muted:   #AB9576; /* ≥4.5:1 и на --atl-bg, и на --atl-panel-bg */
    --atl-accent:       #C09A62;
    --atl-accent-bg:    rgba(192, 154, 98, 0.10);
    --atl-border:       #46392A;
    --atl-shadow:       0 2px 12px rgba(0, 0, 0, 0.35);
    --atl-shadow-elev:  0 8px 30px rgba(0, 0, 0, 0.50);
    --atl-overlay:      rgba(0, 0, 0, 0.60);

    /* тёмные темы: сетка чуть СВЕТЛЕЕ фона (ТЗ §7.2) */
    --atl-sea:          #1C1510;
    --atl-land:         #443626;
    --atl-grid:         #271E16;
    --atl-region-fill:  rgba(192, 154, 98, 0.09);
    --atl-region-stroke:#8A6F4D;
    --atl-city:         #C7AC7F;
    --atl-city-label:   #D9C6A6;

    --atl-p-prophet:    #4CAF6E;
    --atl-p-sahabi:     #E0B341;
    --atl-p-tabii:      #56A8CE;
    --atl-p-taba:       #B187DC;
    --atl-p-era1:       #E5854F;
    --atl-p-era2:       #E06585;
    --atl-p-era3:       #93B35C;

    --atl-edge-suhba:   #55B476;
    --atl-edge-ilm:     #5FA6D3;
    --atl-edge-tarbiya: #B58BDF;
    --atl-edge-riwaya:  #B49B6F;
    --atl-silsila:      #E8C868;
}

/* ── NIGHT — тёплая чёрная ── */
.atl-root[data-atlas-theme="night"] {
    --atl-bg:           #171412;
    --atl-bg-elevated:  #201C19;
    --atl-panel-bg:     #241F1B;
    --atl-text:         #CBBB9C;
    --atl-text-muted:   #988B71; /* ≥4.5:1 и на --atl-bg, и на --atl-panel-bg */
    --atl-accent:       #B89870;
    --atl-accent-bg:    rgba(184, 152, 112, 0.10);
    --atl-border:       #2E2825;
    --atl-shadow:       0 2px 12px rgba(0, 0, 0, 0.40);
    --atl-shadow-elev:  0 8px 30px rgba(0, 0, 0, 0.55);
    --atl-overlay:      rgba(0, 0, 0, 0.65);

    --atl-sea:          #0D0B0A;
    --atl-land:         #2E2720;
    --atl-grid:         #161311;
    --atl-region-fill:  rgba(184, 152, 112, 0.08);
    --atl-region-stroke:#6E5C44;
    --atl-city:         #B9A47C;
    --atl-city-label:   #CBBB9C;

    --atl-p-prophet:    #48A96A;
    --atl-p-sahabi:     #DCB13E;
    --atl-p-tabii:      #52A3C8;
    --atl-p-taba:       #AC83D6;
    --atl-p-era1:       #DF7F4A;
    --atl-p-era2:       #DB6080;
    --atl-p-era3:       #8EAE57;

    --atl-edge-suhba:   #4FAE71;
    --atl-edge-ilm:     #5AA1CE;
    --atl-edge-tarbiya: #B086DA;
    --atl-edge-riwaya:  #AC936A;
    --atl-silsila:      #E3C25F;
}

/* ── Карточки-свотчи в панели тем ── */
.atl-theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.atl-theme-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1.5px solid var(--atl-border);
    border-radius: 10px;
    background: var(--atl-bg-elevated);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.atl-theme-card:hover { border-color: var(--atl-accent); box-shadow: var(--atl-shadow); }
.atl-theme-card.active { border-color: var(--atl-accent); box-shadow: 0 0 0 2px var(--atl-accent-bg); }

.atl-theme-swatch {
    display: block;
    height: 44px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.atl-theme-card-parchment  .atl-theme-swatch { background: linear-gradient(135deg, #F9F3E3 50%, #E4D9BC 50%); border-color: #E0D3B4; }
.atl-theme-card-slate      .atl-theme-swatch { background: linear-gradient(135deg, #F7F9FA 50%, #DBE2E7 50%); border-color: #D6DCE2; }
.atl-theme-card-sepia-dark .atl-theme-swatch { background: linear-gradient(135deg, #382D20 50%, #241C15 50%); border-color: #46392A; }
.atl-theme-card-night      .atl-theme-swatch { background: linear-gradient(135deg, #262019 50%, #121010 50%); border-color: #2E2825; }

.atl-theme-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--atl-text);
    text-align: center;
}