/* ============================================================================
 * echo-theme.css  —  the Echo brand skin for EchoControl
 * ----------------------------------------------------------------------------
 * ONE place for the look and feel: the colours, the font, the buttons, the
 * inputs, and the smooth hover animations — styled to match Echo's other
 * product, reviewtool.gg.
 *
 * HOW IT'S USED: every app page links this file RIGHT AFTER its own <style>
 * block. Because it loads last, it gets the final say on the shared bits
 * (the background, buttons, inputs, links) while each page keeps its own
 * page-specific layout. So one file rebrands the whole app.
 *
 * NOT loaded by the on-stream OBS widgets (the prompter overlays and the
 * broadcast graphic) — those need clean/transparent backgrounds for the stream.
 *
 * TO REBRAND: change the values in :root below. Nothing else needs editing.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ----- Echo brand red ----- */
  --echo-red:        #e5202f;
  --echo-red-hover:  #ff2d3d;
  --echo-red-deep:   #b3121f;
  --echo-red-glow:   rgba(229, 32, 47, .35);

  /* ----- Surfaces (dark, near-black) ----- */
  --bg:        #09090c;   /* the page behind everything */
  --panel:     #131318;   /* a card / panel */
  --panel-2:   #1b1b22;   /* a raised element (e.g. a button) */
  --field:     #0e0e13;   /* an input box */

  /* ----- Lines + text ----- */
  --line:         rgba(255,255,255,.08);
  --line-strong:  rgba(255,255,255,.16);
  --text:         #f3f4f6;
  --muted:        #9a9ba6;
  --faint:        #6b6c78;

  /* ----- Status colours ----- */
  --green:  #35c98a;
  --amber:  #e2b93b;

  /* ----- Shape + motion (the "polish") ----- */
  --radius:     14px;
  --radius-sm:  10px;
  --pill:       999px;
  --ease:       cubic-bezier(.4, 0, .2, 1);
  --t:          180ms var(--ease);        /* the standard smooth transition */
  --shadow:     0 12px 34px rgba(0,0,0,.45);
  --font:       'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- The page canvas: dark with a soft red glow at the top (like reviewtool) *
 * The glow is anchored to the viewport (background-attachment: fixed) and set to
 * NOT repeat — so on tall/scrolling pages it stays as a single glow up top
 * instead of tiling into repeated red bands down the page.                    */
body {
  background-color: var(--bg);
  background-image: radial-gradient(1200px 540px at 50% -180px, var(--echo-red-glow), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A very subtle HUD-grid texture behind everything (see assets/hud-grid.svg).
   It's a fixed layer so it stays put while the page scrolls, and it never
   catches clicks. Turn it off by removing this rule; make it more/less visible
   by changing the opacity here (or the opacities inside the SVG). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;                 /* sits above the page colour, below the content */
  pointer-events: none;
  background: url("../assets/hud-grid.svg") repeat;
  opacity: 0.5;                /* the SVG lines are already faint; this softens further */
}

h1, h2, h3 { letter-spacing: -.01em; }

/* Links fade their colour on hover. */
a { transition: color var(--t); }

/* ---- The Echo wordmark + logo (reusable header brand) --------------------- */
.echo-brand { display: inline-flex; align-items: center; gap: 11px; }
.echo-brand img { width: 34px; height: 34px; display: block; }
.echo-brand .wm { font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--text); }
.echo-brand .wm b { color: var(--echo-red); font-weight: 800; }

/* ---- Buttons: pill-shaped, smooth, with a bright-red primary -------------- */
.btn {
  font-family: var(--font);
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t), color var(--t);
}
.btn:hover  { background: #26262f; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn.primary {
  background: var(--echo-red);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px var(--echo-red-glow);
}
.btn.primary:hover {
  background: var(--echo-red-hover);
  box-shadow: 0 10px 26px var(--echo-red-glow);
}

/* A danger button keeps a red tint but stays outline until hovered. */
.btn.danger:hover { background: var(--echo-red-deep); border-color: transparent; color: #fff; }

/* ---- Inputs / selects / textareas: consistent, with a red focus ring ------ */
input, select, textarea {
  font-family: var(--font);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible {
  outline: none;
  border-color: var(--echo-red);
  box-shadow: 0 0 0 3px var(--echo-red-glow);
}

/* ---- Small status pill (e.g. "Connected") -------------------------------- */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: var(--pill); }
.badge.green { color: var(--green); background: rgba(53,201,138,.12); border: 1px solid rgba(53,201,138,.3); }
.badge.gray  { color: var(--faint); background: rgba(255,255,255,.05); border: 1px solid var(--line); }

/* ---- A tidy, on-brand scrollbar ------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: #2a2a33 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #26262f; border-radius: var(--pill); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #34343f; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }