/* ==========================================================================
   Tiberius Gaming: design tokens  (tiberiusgaming.com)
   Umbrella brand = neutral dark + one hot-pink accent.
   Channel sections re-theme by adding .theme-jamz or .theme-nexus to a wrapper.
   Fonts (put in <head>, see style-guide.md):
   https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Press+Start+2P&family=VT323&family=Bangers&family=Luckiest+Guy&family=Fredoka:wght@400;500;600;700&display=swap
   ========================================================================== */

:root {
  /* ---- Umbrella palette ---- */
  --tg-ink:            #0D0B12;  /* page background */
  --tg-surface:        #16131D;  /* cards, header, footer */
  --tg-surface-2:      #201B2A;  /* raised / hover surfaces, inputs */
  --tg-border:         #2F2840;  /* hairlines, card borders */
  --tg-text:           #F4F1F8;  /* main text on dark (17.5:1 on ink) */
  --tg-text-muted:     #A79FB5;  /* secondary text (7.7:1 on ink) */
  --tg-accent:         #FF3D7F;  /* THE accent: hot pink (5.8:1 on ink) */
  --tg-accent-hover:   #FF6198;
  --tg-accent-press:   #E0306B;
  --tg-on-accent:      #0D0B12;  /* text on pink buttons (5.8:1). Never white on pink (3.4:1). */
  --tg-accent-soft:    rgba(255, 61, 127, 0.14); /* tinted backgrounds, focus glow */
  --tg-paper:          #FAF8FC;  /* optional light sections */
  --tg-paper-text:     #0D0B12;
  --tg-paper-muted:    #5E566E;  /* 6.6:1 on paper */
  --tg-accent-on-paper:#D6245F;  /* pink for text/links on light bg (4.65:1) */
  --tg-success:        #3DDC97;
  --tg-live:           #FF3D7F;  /* "LIVE" badge uses the accent */

  /* ---- Type ---- */
  --tg-font-heading: "Sora", "Inter", system-ui, sans-serif;
  --tg-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tg-fw-heading: 800;
  --tg-fw-body: 400;
  --tg-text-xs: 0.75rem;   /* 12 */
  --tg-text-sm: 0.875rem;  /* 14 */
  --tg-text-md: 1rem;      /* 16 body */
  --tg-text-lg: 1.25rem;   /* 20 */
  --tg-text-xl: 1.75rem;   /* 28 h3 */
  --tg-text-2xl: 2.5rem;   /* 40 h2 */
  --tg-text-3xl: clamp(2.5rem, 6vw, 4.5rem); /* hero h1 */
  --tg-tracking-caps: 0.08em; /* for small uppercase labels */

  /* ---- Shape & space ---- */
  --tg-radius-sm: 8px;
  --tg-radius:    14px;
  --tg-radius-lg: 22px;   /* echoes the logo tile corner */
  --tg-radius-pill: 999px;
  --tg-space-1: 4px;  --tg-space-2: 8px;  --tg-space-3: 12px; --tg-space-4: 16px;
  --tg-space-5: 24px; --tg-space-6: 32px; --tg-space-7: 48px; --tg-space-8: 72px;
  --tg-maxw: 1200px;
  --tg-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --tg-focus-ring: 0 0 0 3px var(--tg-ink), 0 0 0 5px var(--tg-accent);
  --tg-ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Semantic slots (what components actually use) ----
     Channel themes override ONLY these, so the same components re-skin. */
  --bg: var(--tg-ink);
  --bg-image: none;
  --surface: var(--tg-surface);
  --surface-2: var(--tg-surface-2);
  --border: var(--tg-border);
  --border-width: 1px;
  --text: var(--tg-text);
  --text-muted: var(--tg-text-muted);
  --heading: var(--tg-text);
  --accent: var(--tg-accent);
  --accent-hover: var(--tg-accent-hover);
  --on-accent: var(--tg-on-accent);
  --link: var(--tg-accent);
  --link-hover: var(--tg-accent-hover);
  --font-heading: var(--tg-font-heading);
  --font-body: var(--tg-font-body);
  --fw-heading: var(--tg-fw-heading);
  --heading-transform: none;
  --heading-tracking: -0.01em;
  --radius: var(--tg-radius);
  --btn-radius: var(--tg-radius-sm);
  --btn-shadow: none;
  --btn-shadow-hover: 0 6px 20px rgba(255, 61, 127, 0.35);
  --card-shadow: var(--tg-shadow);
}

/* ---- Optional light section (umbrella) ---- */
.theme-light {
  --bg: var(--tg-paper); --surface: #FFFFFF; --surface-2: #F1EDF6; --border: #E2DCEA;
  --text: var(--tg-paper-text); --text-muted: var(--tg-paper-muted); --heading: var(--tg-paper-text);
  --link: var(--tg-accent-on-paper); --link-hover: #B81B50;
  --card-shadow: 0 8px 24px rgba(13, 11, 18, 0.08);
}

/* ==========================================================================
   @jamztiberius: synthwave pixel (palette C)
   ========================================================================== */
.theme-jamz {
  --jamz-gold:     #FFE86A;
  --jamz-amber:    #FFA53A;
  --jamz-orange:   #FF6A3D;
  --jamz-rose:     #E3336D;
  --jamz-wine:     #5C1233;
  --jamz-lilac:    #B394FF;
  --jamz-violet:   #A46BFF;
  --jamz-purple:   #6231B8;
  --jamz-indigo:   #2E1566;
  --jamz-night:    #0C0517;
  --jamz-night-2:  #170A2C;
  --jamz-night-3:  #241040;
  --jamz-dusk:     #361A5C;
  --jamz-sunset: linear-gradient(180deg, #FFE86A 0%, #FFA53A 40%, #FF6A3D 70%, #E3336D 100%);

  --bg: var(--jamz-night);
  --bg-image: linear-gradient(180deg, #0C0517 0%, #170A2C 55%, #361A5C 100%);
  --surface: var(--jamz-night-2);
  --surface-2: var(--jamz-night-3);
  --border: var(--jamz-violet);
  --border-width: 4px;            /* chunky pixel outline */
  --text: #F1E9FF;
  --text-muted: var(--jamz-lilac);
  --heading: var(--jamz-gold);
  --accent: var(--jamz-amber);
  --accent-hover: var(--jamz-gold);
  --on-accent: var(--jamz-indigo);
  --link: var(--jamz-amber);
  --link-hover: var(--jamz-gold);
  --font-heading: "Press Start 2P", ui-monospace, monospace;  /* headings & buttons only, short text */
  --font-body: "VT323", ui-monospace, monospace;               /* body: set font-size >= 1.25rem */
  --fw-heading: 400;
  --heading-transform: uppercase;
  --heading-tracking: 0.02em;
  --radius: 0;                    /* pixel art = square corners */
  --btn-radius: 0;
  --btn-shadow: 4px 4px 0 var(--jamz-indigo);
  --btn-shadow-hover: 6px 6px 0 var(--jamz-purple);
  --card-shadow: 0 0 0 4px var(--jamz-indigo), 0 0 24px rgba(164, 107, 255, 0.35);
  font-size: 1.25rem;             /* VT323 runs small */
  image-rendering: pixelated;     /* keep pixel art crisp when scaled */
}

/* ==========================================================================
   @thenexuslivetv: comic book, Nexie the friendly loch monster
   ========================================================================== */
.theme-nexus {
  --nexus-lime:      #B8F23A;
  --nexus-magenta:   #FF2E88;
  --nexus-black:     #141414;
  --nexus-paper:     #FFFBEF;
  --nexus-teal:      #25C2C9;
  --nexus-deep-teal: #138A99;
  --nexus-belly:     #E9FFB8;
  --nexus-loch:      #1E88E5;
  --nexus-halftone: radial-gradient(rgba(20,20,20,.12) 1.2px, transparent 1.4px) 0 0 / 10px 10px;

  --bg: var(--nexus-paper);
  --bg-image: var(--nexus-halftone);
  --surface: #FFFFFF;
  --surface-2: var(--nexus-belly);
  --border: var(--nexus-black);
  --border-width: 3px;            /* ink outline */
  --text: var(--nexus-black);
  --text-muted: #4A4A4A;
  --heading: var(--nexus-black);
  --accent: var(--nexus-lime);
  --accent-hover: #C9FF55;
  --on-accent: var(--nexus-black);
  --link: var(--nexus-black);     /* links: black text + magenta underline (magenta text alone is only 3.4:1) */
  --link-hover: var(--nexus-magenta);
  --font-heading: "Bangers", "Luckiest Guy", Impact, sans-serif;
  --font-body: "Fredoka", "Nunito", system-ui, sans-serif;
  --fw-heading: 400;
  --heading-transform: uppercase;
  --heading-tracking: 0.03em;
  --radius: 18px;
  --btn-radius: 12px;
  --btn-shadow: 4px 4px 0 var(--nexus-black);   /* hard comic offset shadow */
  --btn-shadow-hover: 6px 6px 0 var(--nexus-black);
  --card-shadow: 6px 6px 0 var(--nexus-black);
}
/* Luckiest Guy is the alternate display face for big chunky words (e.g. "LIVE!") */
.theme-nexus .display-alt { font-family: "Luckiest Guy", "Bangers", sans-serif; }

/* ==========================================================================
   Base components (use semantic slots so they re-skin per theme)
   ========================================================================== */
body, .theme-jamz, .theme-nexus, .theme-light {
  background-color: var(--bg);
  background-image: var(--bg-image);
  color: var(--text);
  font-family: var(--font-body);
}
h1, h2, h3, .tg-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-tracking);
  color: var(--heading);
  line-height: 1.1;
}
.theme-jamz h1, .theme-jamz h2, .theme-jamz h3 { line-height: 1.5; } /* pixel font needs air */

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
.theme-nexus a { text-decoration-color: var(--nexus-magenta); }
:focus-visible { outline: none; box-shadow: var(--tg-focus-ring); border-radius: 4px; }

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .8em 1.4em; border: 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem; text-decoration: none;
  border-radius: var(--btn-radius);
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--btn-shadow);
  transition: transform .15s var(--tg-ease), box-shadow .15s var(--tg-ease), background-color .15s;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--border); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 2px var(--accent); }
.theme-jamz .btn { font-size: .75rem; font-weight: 400; text-transform: uppercase; padding: 1em 1.3em; border: 4px solid var(--jamz-violet); }
.theme-nexus .btn { font-size: 1.35rem; font-weight: 400; letter-spacing: .04em; border: 3px solid var(--nexus-black); }
.theme-nexus .btn--alt { background: var(--nexus-magenta); color: #FFFFFF; } /* white on magenta 3.4:1: large Bangers text only */

.card {
  background: var(--surface); color: var(--text);
  border: var(--border-width) solid var(--border); border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.badge-live {
  display: inline-flex; align-items: center; gap: .4em; padding: .25em .7em;
  font: 700 .75rem/1 var(--tg-font-body); letter-spacing: .08em; text-transform: uppercase;
  background: var(--tg-live); color: var(--tg-on-accent); border-radius: var(--tg-radius-pill);
}
.badge-live::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }