/* ============================================================
   ATLAS MODAL THEME
   Shared semantic theme contract for Atlas Search and Session.

   Host identity comes from:
   body[data-atlas-world="atlas"]
   body[data-atlas-world="compass"]
   body[data-atlas-world="arcade"]

   Appearance comes from:
   html[data-theme="night"]

   Search result icons retain the identity of their destination
   world independently of the current host world.
   ============================================================ */

:root {
    /* Shared geometry and typography */
    --atlas-overlay-width: 32rem;
    --atlas-modal-radius-sm: 10px;
    --atlas-modal-radius-lg: 18px;
    --atlas-modal-font-body: 'DM Sans', system-ui, sans-serif;
    --atlas-modal-font-display: 'DM Serif Display', Georgia, serif;

    /* Atlas · day fallback
       Cool porcelain and slate distinguish the neutral system world
       from Compass's warm editorial identity. */
    --atlas-modal-overlay-bg: rgba(17, 18, 24, 0.52);
    --atlas-modal-surface: #f7f8fa;
    --atlas-modal-surface-low: #eceff3;
    --atlas-modal-surface-raised: #ffffff;
    --atlas-modal-row-surface: #f1f3f6;
    --atlas-modal-row-active: rgba(89, 97, 125, 0.11);
    --atlas-modal-row-secondary: rgba(255, 255, 255, 0.56);
    --atlas-modal-control-surface: #ffffff;
    --atlas-modal-control-hover: #e7eaf0;

    --atlas-modal-border: rgba(34, 39, 54, 0.12);
    --atlas-modal-border-strong: rgba(34, 39, 54, 0.20);

    --atlas-modal-heading: #20232d;
    --atlas-modal-text: #4b5160;
    --atlas-modal-muted: #747b89;
    --atlas-modal-faint: #9ca2ad;

    --atlas-modal-accent: #59617d;
    --atlas-modal-accent-hover: #49516b;
    --atlas-modal-accent-soft: #7a829d;
    --atlas-modal-accent-rgb: 89, 97, 125;
    --atlas-modal-accent-ink: #ffffff;
    --atlas-modal-accent-bg: rgba(89, 97, 125, 0.09);
    --atlas-modal-accent-bg-strong: rgba(89, 97, 125, 0.16);

    --atlas-modal-neutral-icon-bg: #e8ebef;
    --atlas-modal-neutral-icon-text: #697180;
    --atlas-modal-neutral-icon-border: rgba(34, 39, 54, 0.12);

    --atlas-modal-shadow: 0 24px 70px rgba(22, 25, 34, 0.18);
    --atlas-modal-scrollbar: rgba(105, 113, 128, 0.34);
    --atlas-modal-scrollbar-hover: rgba(105, 113, 128, 0.52);

    --atlas-modal-danger-text: #b23a2e;
    --atlas-modal-danger-bg: #fbf1f0;
    --atlas-modal-danger-bg-hover: #ffeeee;
    --atlas-modal-danger-border: rgba(178, 58, 46, 0.30);

    /* Destination-owned Search result icons */
    --atlas-modal-subject-icon-bg: rgba(79, 119, 114, 0.11);
    --atlas-modal-subject-icon-text: #4f7772;
    --atlas-modal-subject-icon-border: rgba(79, 119, 114, 0.23);

    --atlas-modal-game-icon-bg: rgba(223, 87, 47, 0.10);
    --atlas-modal-game-icon-text: #b85f45;
    --atlas-modal-game-icon-border: rgba(184, 95, 69, 0.20);
}

/* ============================================================
   COMPASS · DAY
   ============================================================ */

body[data-atlas-world="compass"] {
    --atlas-modal-overlay-bg: rgba(20, 17, 12, 0.50);
    --atlas-modal-surface: #fffdf9;
    --atlas-modal-surface-low: #f5f1e9;
    --atlas-modal-surface-raised: #ffffff;
    --atlas-modal-row-surface: #fffdf9;
    --atlas-modal-row-active: #eaf3f1;
    --atlas-modal-row-secondary: rgba(255, 255, 255, 0.52);
    --atlas-modal-control-surface: #fffdf9;
    --atlas-modal-control-hover: #eee8de;

    --atlas-modal-border: #e2dacf;
    --atlas-modal-border-strong: #c6bbad;

    --atlas-modal-heading: #1e1b16;
    --atlas-modal-text: #3d3830;
    --atlas-modal-muted: #7a7268;
    --atlas-modal-faint: #8f8578;

    --atlas-modal-accent: #4f7772;
    --atlas-modal-accent-hover: #426762;
    --atlas-modal-accent-soft: #78a19c;
    --atlas-modal-accent-rgb: 79, 119, 114;
    --atlas-modal-accent-ink: #ffffff;
    --atlas-modal-accent-bg: rgba(79, 119, 114, 0.09);
    --atlas-modal-accent-bg-strong: rgba(79, 119, 114, 0.16);

    --atlas-modal-neutral-icon-bg: #eee8de;
    --atlas-modal-neutral-icon-text: #7a7268;
    --atlas-modal-neutral-icon-border: #e2dacf;

    --atlas-modal-shadow: 0 24px 64px rgba(49, 42, 32, 0.15);
    --atlas-modal-scrollbar: rgba(122, 114, 104, 0.34);
    --atlas-modal-scrollbar-hover: rgba(122, 114, 104, 0.52);
}

/* ============================================================
   ARCADE · DAY
   Orange identity over warm neutral structure.
   ============================================================ */

body[data-atlas-world="arcade"] {
    --atlas-modal-overlay-bg: rgba(24, 19, 24, 0.50);
    --atlas-modal-surface: #fffdf9;
    --atlas-modal-surface-low: #f3eee9;
    --atlas-modal-surface-raised: #ffffff;
    --atlas-modal-row-surface: #faf8f5;
    --atlas-modal-row-active: rgba(111, 83, 111, 0.075);
    --atlas-modal-row-secondary: rgba(255, 255, 255, 0.52);
    --atlas-modal-control-surface: #fffdf9;
    --atlas-modal-control-hover: #f0ebe6;

    --atlas-modal-border: rgba(76, 57, 72, 0.13);
    --atlas-modal-border-strong: rgba(76, 57, 72, 0.21);

    --atlas-modal-heading: #302730;
    --atlas-modal-text: #5d515b;
    --atlas-modal-muted: #887b85;
    --atlas-modal-faint: #a89da6;

    --atlas-modal-accent: #6f536f;
    --atlas-modal-accent-hover: #5d435e;
    --atlas-modal-accent-soft: #917792;
    --atlas-modal-accent-rgb: 111, 83, 111;
    --atlas-modal-accent-ink: #ffffff;
    --atlas-modal-accent-bg: rgba(111, 83, 111, 0.075);
    --atlas-modal-accent-bg-strong: rgba(111, 83, 111, 0.14);

    --atlas-modal-neutral-icon-bg: #eee9e4;
    --atlas-modal-neutral-icon-text: #746a72;
    --atlas-modal-neutral-icon-border: rgba(76, 57, 72, 0.13);

    --atlas-modal-shadow: 0 26px 68px rgba(47, 37, 47, 0.18);
    --atlas-modal-scrollbar: rgba(116, 106, 114, 0.34);
    --atlas-modal-scrollbar-hover: rgba(116, 106, 114, 0.52);
}

/* ============================================================
   ATLAS · NIGHT FALLBACK
   ============================================================ */

html[data-theme="night"] {
    --atlas-modal-overlay-bg: rgba(5, 6, 10, 0.74);
    --atlas-modal-surface: #22242b;
    --atlas-modal-surface-low: #191b21;
    --atlas-modal-surface-raised: #2c2f38;
    --atlas-modal-row-surface: #2a2d35;
    --atlas-modal-row-active: rgba(168, 176, 207, 0.18);
    --atlas-modal-row-secondary: rgba(255, 255, 255, 0.025);
    --atlas-modal-control-surface: #191b21;
    --atlas-modal-control-hover: #30333d;

    --atlas-modal-border: rgba(255, 255, 255, 0.10);
    --atlas-modal-border-strong: rgba(255, 255, 255, 0.17);

    --atlas-modal-heading: #f1f2f5;
    --atlas-modal-text: #d7d9e0;
    --atlas-modal-muted: #a8acb7;
    --atlas-modal-faint: #7c818d;

    --atlas-modal-accent: #a8b0cf;
    --atlas-modal-accent-hover: #c0c6df;
    --atlas-modal-accent-soft: #c0c6df;
    --atlas-modal-accent-rgb: 168, 176, 207;
    --atlas-modal-accent-ink: #1b1d24;
    --atlas-modal-accent-bg: rgba(168, 176, 207, 0.15);
    --atlas-modal-accent-bg-strong: rgba(168, 176, 207, 0.24);

    --atlas-modal-neutral-icon-bg: #2c2f38;
    --atlas-modal-neutral-icon-text: #a8acb7;
    --atlas-modal-neutral-icon-border: rgba(255, 255, 255, 0.10);

    --atlas-modal-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
    --atlas-modal-scrollbar: rgba(168, 172, 183, 0.32);
    --atlas-modal-scrollbar-hover: rgba(168, 172, 183, 0.50);

    --atlas-modal-danger-text: #ffdede;
    --atlas-modal-danger-bg: rgba(125, 49, 49, 0.28);
    --atlas-modal-danger-bg-hover: rgba(125, 49, 49, 0.40);
    --atlas-modal-danger-border: rgba(228, 185, 185, 0.52);

    --atlas-modal-subject-icon-bg: rgba(132, 202, 191, 0.16);
    --atlas-modal-subject-icon-text: #a6dcd3;
    --atlas-modal-subject-icon-border: rgba(132, 202, 191, 0.30);

    --atlas-modal-game-icon-bg: rgba(255, 129, 93, 0.16);
    --atlas-modal-game-icon-text: #ff9a7a;
    --atlas-modal-game-icon-border: rgba(255, 129, 93, 0.28);
}

/* ============================================================
   COMPASS · NIGHT
   ============================================================ */

html[data-theme="night"] body[data-atlas-world="compass"] {
    --atlas-modal-overlay-bg: rgba(14, 12, 10, 0.74);
    --atlas-modal-surface: #38332d;
    --atlas-modal-surface-low: #2d2925;
    --atlas-modal-surface-raised: #453f38;
    --atlas-modal-row-surface: #453f38;
    --atlas-modal-row-active: #2c4c47;
    --atlas-modal-row-secondary: rgba(255, 255, 255, 0.028);
    --atlas-modal-control-surface: #2d2925;
    --atlas-modal-control-hover: #453f38;

    --atlas-modal-border: #4c453d;
    --atlas-modal-border-strong: #635a4e;

    --atlas-modal-heading: #f5f0e8;
    --atlas-modal-text: #e7e0d4;
    --atlas-modal-muted: #cfc7ba;
    --atlas-modal-faint: #bab2a6;

    --atlas-modal-accent: #84cabf;
    --atlas-modal-accent-hover: #a6dcd3;
    --atlas-modal-accent-soft: #a6dcd3;
    --atlas-modal-accent-rgb: 132, 202, 191;
    --atlas-modal-accent-ink: #17201e;
    --atlas-modal-accent-bg: rgba(132, 202, 191, 0.12);
    --atlas-modal-accent-bg-strong: rgba(132, 202, 191, 0.22);

    --atlas-modal-neutral-icon-bg: #453f38;
    --atlas-modal-neutral-icon-text: #cfc7ba;
    --atlas-modal-neutral-icon-border: #635a4e;

    --atlas-modal-shadow: 0 28px 80px rgba(0, 0, 0, 0.40);
    --atlas-modal-scrollbar: rgba(207, 199, 186, 0.30);
    --atlas-modal-scrollbar-hover: rgba(207, 199, 186, 0.48);
}

/* ============================================================
   ARCADE · NIGHT
   Coral highlights over warm charcoal structure.
   ============================================================ */

html[data-theme="night"] body[data-atlas-world="arcade"] {
    --atlas-modal-overlay-bg: rgba(7, 6, 8, 0.76);
    --atlas-modal-surface: #2a2629;
    --atlas-modal-surface-low: #211e21;
    --atlas-modal-surface-raised: #343034;
    --atlas-modal-row-surface: #343034;
    --atlas-modal-row-active: rgba(199, 165, 202, 0.10);
    --atlas-modal-row-secondary: rgba(255, 255, 255, 0.025);
    --atlas-modal-control-surface: #211e21;
    --atlas-modal-control-hover: #393239;

    --atlas-modal-border: rgba(255, 255, 255, 0.10);
    --atlas-modal-border-strong: rgba(255, 255, 255, 0.17);

    --atlas-modal-heading: #f4eef4;
    --atlas-modal-text: #d9cfd8;
    --atlas-modal-muted: #aa9eaa;
    --atlas-modal-faint: #7d727c;

    --atlas-modal-accent: #c7a5ca;
    --atlas-modal-accent-hover: #d9badc;
    --atlas-modal-accent-soft: #d9badc;
    --atlas-modal-accent-rgb: 199, 165, 202;
    --atlas-modal-accent-ink: #251b25;
    --atlas-modal-accent-bg: rgba(199, 165, 202, 0.10);
    --atlas-modal-accent-bg-strong: rgba(199, 165, 202, 0.18);

    --atlas-modal-neutral-icon-bg: #393439;
    --atlas-modal-neutral-icon-text: #b0a4af;
    --atlas-modal-neutral-icon-border: rgba(255, 255, 255, 0.11);

    --atlas-modal-shadow: 0 28px 80px rgba(0, 0, 0, 0.50);
    --atlas-modal-scrollbar: rgba(176, 164, 175, 0.32);
    --atlas-modal-scrollbar-hover: rgba(176, 164, 175, 0.50);
}