/*
 * milCCG appearance contract
 *
 * Theme colors communicate atmosphere and reinforce state, but are never the
 * sole gameplay signal. Pair force/readiness colors with visible text, icons,
 * patterns, and data attributes using the semantic utilities at the end.
 */

:root,
:root[data-appearance-theme="weathered"] {
  color-scheme: dark;
  --theme-base: #111713;
  --theme-base-raised: #1b211b;
  --theme-base-overlay: #272c23;
  --theme-terrain-rear: #182019;
  --theme-terrain-mid: #3b3b2b;
  --theme-terrain-front: #696044;
  --theme-terrain-contact: #d19a43;
  --theme-neutral: #a39d89;
  --theme-friendly: #78a7b4;
  --theme-enemy: #b66b54;
  --theme-objective: #e6b85f;
  --theme-ink: #f1ead9;
  --theme-soft-ink: #b8b4a6;
  --theme-readiness-ready: #8eaf78;
  --theme-readiness-committed: #b8955f;
  --theme-readiness-disrupted: #c86c54;
  --theme-readiness-destroyed: #77766f;
  --theme-focus-ring: #f1d38a;
  --theme-surface-shadow: rgb(0 0 0 / 42%);
}

:root[data-appearance-theme="cold"] {
  --theme-base: #0b1118;
  --theme-base-raised: #141e28;
  --theme-base-overlay: #202d39;
  --theme-terrain-rear: #111b25;
  --theme-terrain-mid: #263846;
  --theme-terrain-front: #4f6872;
  --theme-terrain-contact: #e0a064;
  --theme-neutral: #94a6b2;
  --theme-friendly: #79c8dc;
  --theme-enemy: #d17b61;
  --theme-objective: #e9b675;
  --theme-ink: #eef5f6;
  --theme-soft-ink: #a8b8c0;
  --theme-readiness-ready: #78c4ba;
  --theme-readiness-committed: #c2a66e;
  --theme-readiness-disrupted: #db735f;
  --theme-readiness-destroyed: #697783;
  --theme-focus-ring: #b5e8f2;
  --theme-surface-shadow: rgb(0 4 12 / 52%);
}

:root[data-appearance-theme="premium"] {
  --theme-base: #090909;
  --theme-base-raised: #151515;
  --theme-base-overlay: #232323;
  --theme-terrain-rear: #101114;
  --theme-terrain-mid: #272a30;
  --theme-terrain-front: #4b4c4d;
  --theme-terrain-contact: #c7a65a;
  --theme-neutral: #aaa59a;
  --theme-friendly: #668fd5;
  --theme-enemy: #b45258;
  --theme-objective: #d6b663;
  --theme-ink: #f3eee3;
  --theme-soft-ink: #b7b0a4;
  --theme-readiness-ready: #8cab89;
  --theme-readiness-committed: #c4a360;
  --theme-readiness-disrupted: #c35b5f;
  --theme-readiness-destroyed: #686868;
  --theme-focus-ring: #e4c978;
  --theme-surface-shadow: rgb(0 0 0 / 64%);
}

.theme-surface {
  color: var(--theme-ink);
  background: var(--theme-base);
}

.theme-terrain-band {
  position: relative;
  border-inline: 1px solid color-mix(in srgb, var(--theme-neutral) 22%, transparent);
}

.theme-terrain-band[data-depth="rear"] {
  background: var(--theme-terrain-rear);
}

.theme-terrain-band[data-depth="mid"] {
  background: var(--theme-terrain-mid);
}

.theme-terrain-band[data-depth="front"] {
  background: var(--theme-terrain-front);
}

.theme-terrain-band[data-depth="front"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  border-block-end: 2px solid var(--theme-terrain-contact);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--theme-terrain-contact) 42%, transparent);
  pointer-events: none;
}

/*
 * Semantic badges must include a real text node such as
 * <span class="theme-semantic__status-label">Ready</span>. The icon and border
 * treatments below provide redundant non-color cues, including in forced colors.
 */
.theme-semantic {
  --semantic-color: var(--theme-neutral);
  border: 2px solid var(--semantic-color);
  color: var(--theme-ink);
}

.theme-semantic[data-force="friendly"] {
  --semantic-color: var(--theme-friendly);
  border-style: solid;
}

.theme-semantic[data-force="enemy"] {
  --semantic-color: var(--theme-enemy);
  border-style: double;
  border-width: 3px;
}

.theme-semantic[data-force="neutral"] {
  --semantic-color: var(--theme-neutral);
  border-style: dashed;
}

.theme-semantic[data-force="objective"] {
  --semantic-color: var(--theme-objective);
  border-style: dotted;
  border-width: 3px;
}

.theme-semantic__status-icon::before {
  display: inline-block;
  min-inline-size: 1.25em;
  color: var(--semantic-color);
  font-weight: 800;
  text-align: center;
}

.theme-semantic[data-readiness="ready"] {
  --semantic-color: var(--theme-readiness-ready);
}

.theme-semantic[data-readiness="ready"] .theme-semantic__status-icon::before {
  content: "●";
}

.theme-semantic[data-readiness="committed"] {
  --semantic-color: var(--theme-readiness-committed);
  border-style: dashed;
}

.theme-semantic[data-readiness="committed"] .theme-semantic__status-icon::before {
  content: "◆";
}

.theme-semantic[data-readiness="disrupted"] {
  --semantic-color: var(--theme-readiness-disrupted);
  border-style: solid;
  text-decoration: underline wavy var(--semantic-color) 1px;
  text-underline-offset: 0.22em;
}

.theme-semantic[data-readiness="disrupted"] .theme-semantic__status-icon::before {
  content: "▲";
}

.theme-semantic[data-readiness="destroyed"] {
  --semantic-color: var(--theme-readiness-destroyed);
  border-style: double;
  opacity: 0.72;
}

.theme-semantic[data-readiness="destroyed"] .theme-semantic__status-icon::before {
  content: "×";
}

.theme-semantic:focus-visible,
.theme-focusable:focus-visible {
  outline: 3px solid var(--theme-focus-ring);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .theme-semantic {
    --semantic-color: CanvasText;
    forced-color-adjust: auto;
  }

  .theme-terrain-band[data-depth="front"]::after {
    border-block-end-color: Highlight;
    box-shadow: none;
  }
}