/* Midnight Forge - visual theme.
 *
 * Every colour, radius and font in the app resolves to a variable defined here.
 * Before this file there were 684 hardcoded colour values spread across twenty
 * files, so changing an accent meant editing all of them and missing some.
 *
 * Palette drawn from the Midnight Forge Records mark: hot forged copper and
 * ember orange over warm charcoal, with steel-silver type.
 */
:root {
  /* --- surfaces ---------------------------------------------------- */
  --bg:            #0d0a09;   /* warm black page */
  --bg-deep:       #070605;   /* near-black player and backdrop */
  --sidebar:       #120e0d;   /* charcoal nav column */
  --panel:         #181311;   /* dark forged-steel cards */
  --panel-2:       #211917;   /* inputs, inner wells, hover */
  --panel-3:       #2c211d;   /* raised / selected */

  /* --- lines ------------------------------------------------------- */
  --line:          rgba(229, 107, 47, 0.24);
  --line-soft:     rgba(232, 219, 210, 0.09);
  --line-strong:   rgba(229, 107, 47, 0.58);

  /* --- brand ------------------------------------------------------- */
  --primary:       #e56b2f;   /* logo ember orange */
  --primary-hi:    #ff9a5c;   /* hot metal highlight */
  --primary-deep:  #bd4b20;   /* forged copper */
  --primary-dark:  #87341b;   /* dark copper edge */
  --primary-soft:  rgba(229, 107, 47, 0.15);
  --primary-soft2: rgba(229, 107, 47, 0.28);
  --primary-glow:  rgba(255, 116, 48, 0.34);

  /* --- text -------------------------------------------------------- */
  --text:          #f2ece8;
  --text-2:        #c9bbb2;
  --text-3:        #9e8e85;
  --muted:         #786961;
  --on-primary:    #160a05;

  /* --- module accents, from the suite cards ------------------------ */
  --accent-lyrics: #e56b2f;
  --accent-prompt: #ff9a5c;
  --accent-audio:  #b9aaa2;
  --accent-cover:  #c6532a;
  --accent-video:  #d78657;
  --accent-release:#f07a3b;

  /* --- states ------------------------------------------------------ */
  --ok:            #3ec98a;
  --warn:          #e8a33d;
  --danger:        #e5484d;

  /* --- shape and type ---------------------------------------------- */
  --radius:        12px;
  --radius-sm:     8px;
  --radius-pill:   999px;
  --elev:          0 10px 30px rgba(0, 0, 0, 0.45);
  --elev-soft:     0 4px 14px rgba(0, 0, 0, 0.3);

  /* --- legacy names -------------------------------------------------
   * styles.css was written against an older set of variable names and still
   * refers to them throughout. Aliasing them here means the old stylesheet
   * follows the new palette without being rewritten line by line.
   * --shadow stays a COLOUR: the old sheet uses it inside box-shadow. */
  --panel2:        var(--panel-2);
  --steel:         var(--text-3);
  --light:         var(--text);
  --border:        var(--line-soft);
  --orange:        var(--primary);
  --orange2:       var(--primary-hi);
  --shadow:        var(--primary-glow);

  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* The old theme was Georgia throughout. The design is a clean sans, so set it
 * once at the root and let everything inherit rather than chasing font-family
 * declarations through twenty files. */
html, body,
button, input, select, textarea {
  font-family: var(--font);
}

h1, h2, h3, .card-heading h2, .field-title {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}