/* ============================================================
   Jakober Musi — Color tokens
   Anchor: the seal red used for years on posters and the homepage.
   Supporting: brass (the band's instruments), Tracht blue (the
   uniforms), warm paper neutrals for an "edel" feel.
   ============================================================ */

:root {
  /* ---- Brand red (the recognition anchor) ---- */
  --red-500: #ae0118;   /* primary signal red — posters, homepage bars, badge */
  --red-600: #981a16;   /* deep red — hover, pressed, darker surfaces */
  --red-700: #7a0f14;   /* bordeaux — deep accents */
  --red-800: #5c0d12;   /* darkest — immersive red sections */
  --red-100: #f7dcdc;   /* tint — soft backgrounds, badges */
  --red-050: #fbeeee;   /* faintest red wash */

  /* ---- Brass / gold (instruments — used sparingly for elegance) ---- */
  --brass-500: #b0863c; /* hairline rules, fine detailing, seal accents */
  --brass-600: #8f6a2c;
  --brass-100: #efe2c8;

  /* ---- Tracht blue (the uniforms — secondary accent) ---- */
  --blue-500: #3a5168;  /* alpine steel blue */
  --blue-600: #2c3e51;
  --blue-100: #dde4ec;

  /* ---- Ink & warm neutrals ---- */
  --ink-900: #1a1410;   /* near-black, warm — primary text */
  --ink-700: #3d352f;   /* strong secondary text */
  --ink-500: #6b625a;   /* muted text, captions */
  --ink-400: #8c837a;   /* placeholder, disabled text */
  --ink-300: #b8b0a6;   /* hairline borders on paper */
  --ink-200: #ddd6cc;   /* dividers */
  --ink-100: #ece7df;   /* subtle fills */

  --paper:   #f7f3ed;   /* warm page background — the "edel" base */
  --paper-2: #efe9e0;   /* alt section background */
  --white:   #ffffff;   /* cards, surfaces */
  --black:   #120d0a;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --brand:            var(--red-500);
  --brand-strong:     var(--red-600);
  --brand-deep:       var(--red-800);
  --accent:           var(--brass-500);
  --accent-cool:      var(--blue-500);

  --bg-page:          var(--paper);
  --bg-alt:           var(--paper-2);
  --surface-card:     var(--white);
  --surface-sunken:   var(--ink-100);
  --surface-brand:    var(--red-500);
  --surface-deep:     var(--red-800);

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-faint:       var(--ink-400);
  --text-on-brand:    #ffffff;
  --text-on-deep:     #f3e7e3;

  --border-hair:      var(--ink-300);
  --border-soft:      var(--ink-200);
  --border-brass:     var(--brass-500);

  /* ---- Rahmenbalken & Trennlinien — Farbe folgt der Farbwelt der Variante ----
     Gilt für den signaturhaften 6px-Balken (--border-bar) UND interne Foto-Trennlinien.
     Rote Variante → weiß · Blaue Variante (Tracht-Blau) → gold/Messing · Edel (Papier) → rot */
  --bar-on-red:    #ffffff;
  --bar-on-blue:   var(--brass-500);
  --bar-on-paper:  var(--red-500);

  --focus-ring:       color-mix(in srgb, var(--red-500) 55%, transparent);

  /* Selection */
  --selection-bg:     var(--red-100);
  --selection-fg:     var(--red-800);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }