/* static/css/esa_theme.css */

/* =========================================================
   THEMES — override only variables
   (Reusable across marketing + future backend)
   ========================================================= */

/* ESA (logo-based) — clean esports default */
body.theme-esa{
  --bg: #070013;                 /* near-black purple */
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --text: rgba(224,221,225,.96); /* logo off-white */
  --muted: rgba(224,221,225,.72);
  --line: rgba(224,221,225,.14);

  --brand1: #700987; /* bright purple */
  --brand2: #36b1df; /* light cyan */
  --brand3: #1179bf; /* cyan/blue */
  
  --button1: #700987; /* bright purple */
  --button2: #1179bf; /* cyan/blue */
  --brand3: #1179bf; /* cyan/blue */

  /* Logo bars: 2-split (default) */
  --bar-a: #36b1df;
  --bar-b: #1179bf;

  /* Wordmark */
  --logo-text: #e6e6e6;
}

/* ESA Arcade — neon punch, stronger contrast */
body.theme-esa-arcade{
  --bg: #04000c;
  --panel: rgba(255,255,255,.07);
  --panel2: rgba(255,255,255,.11);
  --text: rgba(242,240,244,.97);
  --muted: rgba(242,240,244,.74);
  --line: rgba(242,240,244,.16);

  --brand1: #a300ff; /* neon violet */
  --brand2: #36b1df; /* cyan */
  --brand3: #00ffd1; /* electric mint-cyan */

  --bar-a: #36b1df;
  --bar-b: color-mix(in srgb, #36b1df 78%, #000);

  --logo-text: #f2f0f4;
}

/* ESA Retro — warmer, poster/CRT friendly */
body.theme-esa-retro{
  --bg: #09020f;
  --panel: rgba(255,255,255,.055);
  --panel2: rgba(255,255,255,.085);
  --text: rgba(236,231,239,.95);
  --muted: rgba(236,231,239,.70);
  --line: rgba(236,231,239,.13);

  --brand1: #5b0f7a; /* deeper purple */
  --brand2: #2aa8d6; /* softer cyan */
  --brand3: #c38ad6; /* lavender */

  --bar-a: #2aa8d6;
  --bar-b: color-mix(in srgb, #2aa8d6 78%, #000);

  --logo-text: #ece7ef;
}

/* PRIDE — 6-color bars */
body.theme-pride{
  --bg: #0b0b12;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --line: rgba(255,255,255,.12);

  /* Pride bars (6 segments) */
  --bar-1: #e40303; /* red */
  --bar-2: #ff8c00; /* orange */
  --bar-3: #ffed00; /* yellow */
  --bar-4: #008026; /* green */
  --bar-5: #004dff; /* blue */
  --bar-6: #750787; /* violet */

  --logo-text: #ffffff;

  /* Brand accents can remain ESA-ish */
  --brand1: #700987;
  --brand2: #36b1df;
  --brand3: #1179bf;
}

/* ---------- Classic Rainbow (6) ---------- */
body.theme-pride-rainbow{
  --bar-1: #e40303;
  --bar-2: #ff8c00;
  --bar-3: #ffed00;
  --bar-4: #008026;
  --bar-5: #004dff;
  --bar-6: #750787;
}

/* ---------- Bisexual (3) -> mapped to 6 (repeat) ---------- */
body.theme-pride-bi{
  --bar-1: #d60270;
  --bar-2: #d60270;
  --bar-3: #9b4f96;
  --bar-4: #9b4f96;
  --bar-5: #0038a8;
  --bar-6: #0038a8;

  --brand1: #d60270;
  --brand2: #9b4f96;
  --brand3: #0038a8;
}

/* ---------- Transgender (3) -> mapped to 6 ---------- */
body.theme-pride-trans{
  --bar-1: #5bcffb;
  --bar-2: #f5abb9;
  --bar-3: #ffffff;
  --bar-4: #ffffff;
  --bar-5: #f5abb9;
  --bar-6: #5bcffb;
  
  --brand1: #5bcffb;
  --brand2: #ffffff;
  --brand3: #f5abb9;
  --logo-text: #ffffff;
}

/* ---------- Lesbian (5) -> mapped to 6 ---------- */
body.theme-pride-lesbian{
  --bar-1: #d52d00;
  --bar-2: #ef7627;
  --bar-3: #ff9a56;
  --bar-4: #ffffff;
  --bar-5: #d162a4;
  --bar-6: #a30262;

  --brand2: #ef7627;
  --brand3: #a30262;
}

/* ---------- Pansexual (3) -> mapped to 6 ---------- */
body.theme-pride-pan{
  --bar-1: #ff218c;
  --bar-2: #ff218c;
  --bar-3: #ffd800;
  --bar-4: #ffd800;
  --bar-5: #21b1ff;
  --bar-6: #21b1ff;

  --brand2: #ff218c;
  --brand3: #21b1ff;
}

/* ---------- Asexual (4) -> mapped to 6 ---------- */
body.theme-pride-ace{
  --bar-1: #000000;
  --bar-2: #a3a3a3;
  --bar-3: #a3a3a3;
  --bar-4: #ffffff;
  --bar-5: #800080;
  --bar-6: #800080;

  --logo-text: #ffffff;
  --brand2: #a3a3a3;
  --brand3: #800080;
}

/* ---------- Non-binary (4) -> mapped to 6 ---------- */
body.theme-pride-nb{
  --bar-1: #fff430;
  --bar-2: #ffffff;
  --bar-3: #ffffff;
  --bar-4: #9c59d1;
  --bar-5: #9c59d1;
  --bar-6: #000000;

  --logo-text: #ffffff;
  --brand2: #fff430;
  --brand3: #9c59d1;
}

/* ---------- Genderfluid (5) -> mapped to 6 ---------- */
body.theme-pride-genderfluid{
  --bar-1: #ff75a2;
  --bar-2: #ffffff;
  --bar-3: #be18d6;
  --bar-4: #000000;
  --bar-5: #333ebd;
  --bar-6: #333ebd;

  --logo-text: #ffffff;
  --brand2: #ff75a2;
  --brand3: #333ebd;
}

/* ---------- Intersex (2) -> mapped to 6 ---------- */
body.theme-pride-intersex{
  --bar-1: #ffd800;
  --bar-2: #ffd800;
  --bar-3: #7902aa;
  --bar-4: #7902aa;
  --bar-5: #ffd800;
  --bar-6: #ffd800;

  --logo-text: #ffffff;
  --brand2: #ffd800;
  --brand3: #7902aa;
}

/* ---------- Progress Pride (simplified 6) ---------- */
body.theme-pride-progress{
  --bar-1: #000000;  /* black */
  --bar-2: #784f17;  /* brown */
  --bar-3: #5bcffb;  /* trans blue */
  --bar-4: #f5abb9;  /* trans pink */
  --bar-5: #ffffff;  /* white */
  --bar-6: #750787;  /* violet */

  --logo-text: #ffffff;
  --brand2: #5bcffb;
  --brand3: #f5abb9;
}

/* =========================================================
   Legacy themes (kept for reference/compat)
   ========================================================= */

body.theme-esports{
  --bg: #0b0b12;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --line: rgba(255,255,255,.12);

  --brand1: #3c30e7;
  --brand2: #00BFFF;
  --brand3: #00ff99;

  --bar-a: var(--brand2);
  --bar-b: color-mix(in srgb, var(--brand2) 78%, #000);
  --logo-text: rgba(255,255,255,.92);
}

body.theme-arcade{
  --bg: #05060a;
  --panel: rgba(255,255,255,.07);
  --panel2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.14);

  --brand1: #fe2821;
  --brand2: #ffcd11;
  --brand3: #00ff99;

  --bar-a: var(--brand2);
  --bar-b: color-mix(in srgb, var(--brand2) 78%, #000);
  --logo-text: rgba(255,255,255,.94);
}

body.theme-cool{
  --bg: #070a14;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --line: rgba(255,255,255,.12);

  --brand1: #2563eb;
  --brand2: #22d3ee;
  --brand3: #a3e635;

  --bar-a: var(--brand2);
  --bar-b: color-mix(in srgb, var(--brand2) 78%, #000);
  --logo-text: rgba(255,255,255,.92);
}

body.theme-fire{
  --bg: #0a0505;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --line: rgba(255,255,255,.12);

  --brand1: #ff3b30;
  --brand2: #ff8a00;
  --brand3: #ffd000;

  --bar-a: var(--brand2);
  --bar-b: color-mix(in srgb, var(--brand2) 78%, #000);
  --logo-text: rgba(255,255,255,.92);

  --button1: #ff3b30;
  --button2: #ff8a00;

}

body.theme-80s{
  --bg: #070015;
  --panel: rgba(255,255,255,.07);
  --panel2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.93);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.14);

  --brand1: #ff00e5;
  --brand2: #00e5ff;
  --brand3: #9bff00;

  --bar-a: var(--brand2);
  --bar-b: color-mix(in srgb, var(--brand2) 78%, #000);
  --logo-text: rgba(255,255,255,.93);
}

body.theme-retro{
  --bg: #0a0a07;
  --panel: rgba(255,255,255,.055);
  --panel2: rgba(255,255,255,.085);
  --text: rgba(255,255,255,.90);
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.11);

  --brand1: #c084fc;
  --brand2: #34d399;
  --brand3: #fbbf24;

  --bar-a: var(--brand2);
  --bar-b: color-mix(in srgb, var(--brand2) 78%, #000);
  --logo-text: rgba(255,255,255,.90);
}

/* ESA Arcade — neon punch, stronger contrast */
body.theme-classic{
  --bg: rgba(242,240,244,.97);
  --panel: rgba(231, 231, 231, 0.788);
  --panel2: rgba(221, 221, 221, 0.89);
  --text: #04000c;
  --muted: rgba(0, 0, 0, 0.74);
  --line: rgba(242,240,244,.16);

  --brand1: #a300ff; /* neon violet */
  --brand2: #36b1df; /* cyan */
  --brand3: #00ffd1; /* electric mint-cyan */

  --bar-a: #36b1df;
  --bar-b: color-mix(in srgb, #36b1df 78%, #000);

  --logo-text: #f2f0f4;
}

/* =========================================================
   Global defaults (fallback if no theme class present)
   ========================================================= */
:root{
  --bg: #070013;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --text: rgba(224,221,225,.96);
  --muted: rgba(224,221,225,.72);
  --line: rgba(224,221,225,.14);

  --brand1: #700987;
  --brand2: #36b1df;
  --brand3: #1179bf;

  --bar-a: #36b1df;
  --bar-b: #1179bf;

  --logo-text: #e6e6e6;
}

/* =========================================================
   Core resets + page base (shared)
   ========================================================= */
*{ box-sizing:border-box; }

body.mkt-body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  background:
    radial-gradient(1200px 600px at 18% 0%, color-mix(in srgb, var(--brand1) 26%, transparent), transparent 55%),
    radial-gradient(900px 500px at 82% 18%,  color-mix(in srgb, var(--brand2) 20%, transparent), transparent 55%),
    radial-gradient(900px 500px at 65% 85%,  color-mix(in srgb, var(--brand3) 14%, transparent), transparent 60%),
    var(--bg);
background-attachment: fixed;
  color: var(--text);
}

/* =========================================================
   Backend page base (shared theme vars)
   ========================================================= */

body.backend{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  background:
    radial-gradient(1200px 600px at 18% 0%, color-mix(in srgb, var(--brand1) 26%, transparent), transparent 55%),
    radial-gradient(900px 500px at 82% 18%,  color-mix(in srgb, var(--brand2) 20%, transparent), transparent 55%),
    radial-gradient(900px 500px at 65% 85%,  color-mix(in srgb, var(--brand3) 14%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;

  color: var(--text);
}

body.backend a{ color: inherit; text-decoration: none; }
/* explicit 6-bar toggle class */
body.mkt-body.has-6bars .esa-logo .esa-bars .use-2 { display: none; }
body.mkt-body.has-6bars .esa-logo .esa-bars .use-6 { display: block; }

body.backend.has-6bars .esa-logo .esa-bars .use-2 { display: none; }
body.backend.has-6bars .esa-logo .esa-bars .use-6 { display: block; }

/* any theme-pride* forces 6 bars */
body.mkt-body[class*="theme-pride"] .esa-logo .esa-bars .use-2{ display:none; }
body.mkt-body[class*="theme-pride"] .esa-logo .esa-bars .use-6{ display:inline; }

body.backend[class*="theme-pride"] .esa-logo .esa-bars .use-2{ display:none; }
body.backend[class*="theme-pride"] .esa-logo .esa-bars .use-6{ display:inline; }


a{ color: inherit; text-decoration:none; }

/* =========================================================
   ESA logo wiring (2-split default, 6-split for pride)
   ========================================================= */

/* default visibility: show 2 segments, hide 6 */
.esa-logo .esa-bars .use-2{ display:inline; }
.esa-logo .esa-bars .use-6{ display:none; }

/* explicit 6-bar toggle class */
body.mkt-body.has-6bars .esa-logo .esa-bars .use-2 { display: none; }
body.mkt-body.has-6bars .esa-logo .esa-bars .use-6 { display: block; }

/* any theme-pride* forces 6 bars */
body.mkt-body[class*="theme-pride"] .esa-logo .esa-bars .use-2{ display:none; }
body.mkt-body[class*="theme-pride"] .esa-logo .esa-bars .use-6{ display:inline; }

/* wordmark */
.esa-logo .esa-text{
  fill: var(--logo-text, #e6e6e6) !important;
}

/* 2-split bar fills */
.esa-logo #barSegments2 .seg-1{ fill: var(--bar-a, var(--brand2, #36b1df)); }
.esa-logo #barSegments2 .seg-2{ fill: color-mix(in srgb, var(--bar-a, #36b1df) 78%, #000); }

/* 6-split bar fills */
.esa-logo #barSegments6 .seg-1{ fill: var(--bar-1, #e40303); }
.esa-logo #barSegments6 .seg-2{ fill: var(--bar-2, #ff8c00); }
.esa-logo #barSegments6 .seg-3{ fill: var(--bar-3, #ffed00); }
.esa-logo #barSegments6 .seg-4{ fill: var(--bar-4, #008026); }
.esa-logo #barSegments6 .seg-5{ fill: var(--bar-5, #004dff); }
.esa-logo #barSegments6 .seg-6{ fill: var(--bar-6, #750787); }

/* Secondary metadata line (IDs, timestamps, discord, etc) */
.sub{
  font-size: 12px;
  line-height: 1.25;
  color: rgba(224,221,225,.72);
  font-weight: 500;
}

/* Ensure table cells do not override metadata sizing */
td .sub{
  font-size: 12px;
  line-height: 1.25;
}