/* AI Marketplace cosmetic skin (ET-33487 / #1065).
   Two token sets, swapped by the root attribute data-skin="enterprise|retail".
   Skin x theme = four token maps below; components only ever read var(--am-*).
   Markup, grid, type scale, spacing, wording and order are identical in both skins. */

/* ---- enterprise / dark: near-neutral, low chroma, flat ---- */
:root[data-skin="enterprise"] {
  --am-bg: rgb(12 15 20);
  --am-surface: rgb(18 22 29);
  --am-surface-solid: rgb(18 22 29);
  --am-inset: rgb(14 18 24);
  --am-field: rgb(10 13 18);
  --am-text: rgb(230 233 238);
  --am-heading: rgb(242 244 247);
  --am-text-body: rgb(207 213 222);
  --am-text-muted: rgb(154 164 178);
  --am-text-2: rgb(170 179 191);
  --am-text-3: rgb(139 149 163);
  --am-accent: rgb(95 180 214);
  --am-accent-ink: rgb(6 20 27);
  --am-blue: rgb(122 167 224);
  --am-blue-line: rgba(122, 167, 224, .6);
  --am-border: rgba(120, 150, 180, .18);
  --am-border-strong: rgba(120, 150, 180, .32);
  --am-border-faint: rgba(120, 150, 180, .1);
  --am-wash: rgba(255, 255, 255, .03);
  --am-accent-wash: rgba(95, 180, 214, .08);
  --am-accent-line: rgba(95, 180, 214, .35);
  --am-accent-line-strong: rgba(95, 180, 214, .6);
  --am-scrim: rgba(8, 10, 14, .82);
  --am-shadow: 0 1px 0 rgba(0, 0, 0, .28);
  --am-radius: 6px;
  --am-radius-sm: 4px;
  --am-radius-lg: 8px;
  --am-ambient: none;
}

/* ---- enterprise / light ---- */
:root[data-skin="enterprise"][data-theme="light"] {
  --am-bg: rgb(244 245 247);
  --am-surface: rgb(255 255 255);
  --am-surface-solid: rgb(255 255 255);
  --am-inset: rgb(240 242 245);
  --am-field: rgb(255 255 255);
  --am-text: rgb(21 26 34);
  --am-heading: rgb(13 17 24);
  --am-text-body: rgb(43 52 65);
  --am-text-muted: rgb(86 97 112);
  --am-text-2: rgb(74 84 98);
  --am-text-3: rgb(86 97 112);
  --am-accent: rgb(31 111 148);
  --am-accent-ink: rgb(255 255 255);
  --am-blue: rgb(45 95 168);
  --am-blue-line: rgba(45, 95, 168, .6);
  --am-border: rgba(40, 60, 90, .16);
  --am-border-strong: rgba(40, 60, 90, .3);
  --am-border-faint: rgba(40, 60, 90, .08);
  --am-wash: rgba(20, 30, 50, .03);
  --am-accent-wash: rgba(31, 111, 148, .07);
  --am-accent-line: rgba(31, 111, 148, .35);
  --am-accent-line-strong: rgba(31, 111, 148, .6);
  --am-scrim: rgba(244, 245, 247, .85);
  --am-shadow: 0 1px 0 rgba(20, 30, 50, .08);
  --am-radius: 6px;
  --am-radius-sm: 4px;
  --am-radius-lg: 8px;
  --am-ambient: none;
}

/* ---- retail / dark: lifted, soft gradients, a more present accent ---- */
:root[data-skin="retail"] {
  --am-bg: rgb(15 22 38);
  --am-surface: linear-gradient(180deg, rgb(23 34 58) 0%, rgb(19 28 49) 100%);
  --am-surface-solid: rgb(21 31 53);
  --am-inset: rgb(16 26 46);
  --am-field: rgb(12 20 36);
  --am-text: rgb(241 246 252);
  --am-heading: rgb(255 255 255);
  --am-text-body: rgb(216 227 241);
  --am-text-muted: rgb(168 185 208);
  --am-text-2: rgb(182 197 217);
  --am-text-3: rgb(159 176 199);
  --am-accent: rgb(34 211 255);
  --am-accent-ink: rgb(3 26 36);
  --am-blue: rgb(92 157 255);
  --am-blue-line: rgba(92, 157, 255, .65);
  --am-border: rgba(0, 150, 255, .22);
  --am-border-strong: rgba(0, 170, 255, .4);
  --am-border-faint: rgba(0, 150, 255, .12);
  --am-wash: rgba(255, 255, 255, .04);
  --am-accent-wash: rgba(34, 211, 255, .1);
  --am-accent-line: rgba(34, 211, 255, .4);
  --am-accent-line-strong: rgba(34, 211, 255, .7);
  --am-scrim: rgba(10, 14, 23, .82);
  --am-shadow: 0 8px 24px rgba(0, 20, 60, .35);
  --am-radius: 10px;
  --am-radius-sm: 8px;
  --am-radius-lg: 14px;
  --am-ambient:
    radial-gradient(520px 340px at 18% 12%, rgba(34, 140, 255, .16), transparent 70%),
    radial-gradient(460px 320px at 82% 30%, rgba(34, 211, 255, .1), transparent 70%);
}

/* ---- retail / light ---- */
:root[data-skin="retail"][data-theme="light"] {
  --am-bg: rgb(238 244 251);
  --am-surface: linear-gradient(180deg, rgb(255 255 255) 0%, rgb(244 249 255) 100%);
  --am-surface-solid: rgb(255 255 255);
  --am-inset: rgb(234 242 252);
  --am-field: rgb(255 255 255);
  --am-text: rgb(15 27 45);
  --am-heading: rgb(10 20 36);
  --am-text-body: rgb(34 52 77);
  --am-text-muted: rgb(74 95 123);
  --am-text-2: rgb(60 81 112);
  --am-text-3: rgb(74 95 123);
  --am-accent: rgb(3 105 161);
  --am-accent-ink: rgb(255 255 255);
  --am-blue: rgb(29 78 216);
  --am-blue-line: rgba(29, 78, 216, .6);
  --am-border: rgba(0, 110, 210, .22);
  --am-border-strong: rgba(0, 110, 210, .38);
  --am-border-faint: rgba(0, 110, 210, .1);
  --am-wash: rgba(0, 60, 140, .04);
  --am-accent-wash: rgba(3, 105, 161, .08);
  --am-accent-line: rgba(3, 105, 161, .4);
  --am-accent-line-strong: rgba(3, 105, 161, .65);
  --am-scrim: rgba(238, 244, 251, .85);
  --am-shadow: 0 8px 22px rgba(20, 70, 140, .12);
  --am-radius: 10px;
  --am-radius-sm: 8px;
  --am-radius-lg: 14px;
  --am-ambient:
    radial-gradient(520px 340px at 18% 12%, rgba(40, 140, 255, .1), transparent 70%),
    radial-gradient(460px 320px at 82% 30%, rgba(3, 150, 200, .08), transparent 70%);
}

/* ---- ground: the skin paints the page ground; the ambient layer sits behind content ---- */
:root[data-skin] body .content-main {
  background: var(--am-bg);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
:root[data-skin] body .content-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--am-ambient);
  animation: am-skin-drift 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes am-skin-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-skin] body .content-main::before { animation: none; will-change: auto; }
}

/* ---- raised surfaces ---- */
.am-panel, .am-card, .am-stat, .am-sec, .al-panel, .al-fact, .aj-panel, .sp-panel, .tn-panel, .am-modal > div {
  box-shadow: var(--am-shadow);
}