/* ===== themes/theme-summoners-war-sky-arena.css =====
 * Summoners War: Sky Arena theme — warm parchment-and-gold edition.
 *
 * Fantasy-inspired tones with clear depth between background and panels.
 * Targets the visual language of SW guild screens and ranking panels.
 *
 * Implements all roles from the locked theme contract (theme-contract.css)
 * AND the legacy implementation variables consumed by styles.css / modal.css.
 *
 * Authoritative palette (locked):
 *   #301C13  –  full page background
 *   #372A22  –  panels / surfaces
 *   #A36E22  –  button hover, dev-banner bg
 *   #D5B46F  –  button gradient top
 *   #EBC777  –  accent (borders, highlights, separators)
 *   #EFCE8B  –  muted / secondary text
 *   #F8F0D8  –  primary text
 */

/* ─────────────────────────────────────────────────────────────────
   Parchment-and-gold palette
   ───────────────────────────────────────────────────────────────── */
body.theme-summoners-war-sky-arena {
  color-scheme: dark;

  /* ── Full-page background ── */
  background: #301C13;

  /* ── Contract roles ── */
  --bg-app:              #301C13;
  --bg-surface:          #372A22;
  --bg-surface-elevated: #372A22;
  --bg-hover:            color-mix(in srgb, #A36E22 15%, #372A22);
  --bg-selected:         color-mix(in srgb, #A36E22 25%, #372A22);

  --text-primary:   #F8F0D8;
  --text-secondary: #EFCE8B;
  --text-muted:     #EFCE8B;
  --text-inverse:   #301C13;

  --accent-primary:   #EBC777;
  --accent-secondary: #D5B46F;
  --accent-focus:     #EBC777;

  --border-subtle: color-mix(in srgb, #EBC777 25%, #372A22);
  --border-strong: #EBC777;

  --state-success:  #4a8a48;
  --state-warning:  #e89520;
  --state-danger:   #d94040;
  --state-disabled: color-mix(in srgb, #EFCE8B 25%, #372A22);

  /* ── Legacy implementation variables (consumed by styles.css / modal.css) ── */
  --bg:      #301C13;
  --panel:   #372A22;
  --surface: #372A22;
  --border:  color-mix(in srgb, #EBC777 35%, #372A22);
  --text:    #F8F0D8;
  --muted:   #EFCE8B;

  /* ── Gold accent ── */
  --accent:       #EBC777;
  --accent-frame: #A36E22;

  /* ── Depth shadow ── */
  --shadow-soft:
    0 4px 14px rgba(0, 0, 0, 0.50),
    0 10px 32px rgba(0, 0, 0, 0.25);

  /* ── Gold button system ── */
  --button-bg: linear-gradient(
    to bottom,
    #D5B46F 0%,
    #A36E22 100%
  );
  --button-border: #EBC777;
  --button-text:   #301C13;
  --button-hover:  #A36E22;
  --button-active: color-mix(in srgb, #A36E22 80%, #301C13);

  /* ── Panel background (mobile nav) ── */
  --panel-bg: #372A22;

  /* ── Panel depth ── */
  --panel-surface: #372A22;
  --panel-shadow:
    inset 0 1px 0 color-mix(in srgb, #EBC777 15%, transparent),
    0 4px 18px rgba(0, 0, 0, 0.45);
}

/* ── Dev banner override (scoped to this theme only) ── */
body.theme-summoners-war-sky-arena .dev-banner {
  background: #A36E22;
  border-color: #EBC777;
  color: #F8F0D8;
}