/* vars.css — CSS Custom Properties (Design: Die Stämme Style) */
:root {
  /* ── Pergament / Hintergründe ─────────────────────────────── */
  --bg-page:        #b8a07a;
  --bg-content:     #f4e8c8;
  --bg-panel:       #ede0b0;
  --bg-row-even:    #f9f2dc;
  --bg-row-odd:     #ede0b0;
  --bg-header-row:  #c8a06a;
  --bg-header:      #5c3a1e;
  --bg-nav:         #6b4422;
  --bg-nav-active:  #f4e8c8;
  --bg-queue:       #d4b87a;

  /* ── Borders ─────────────────────────────────────────────── */
  --border:         #8b5a2b;
  --border-light:   #c8a06a;
  --border-dark:    #4a2a0e;

  /* ── Text ────────────────────────────────────────────────── */
  --text:           #2a1a06;
  --text-muted:     #6b4422;
  --text-light:     #f4e8c8;
  --text-header:    #f0d890;
  --text-link:      #5c2a0a;
  --text-link-hover:#a04010;

  /* ── Akzente ─────────────────────────────────────────────── */
  --amber:          #c8862a;
  --amber-light:    #e8a840;
  --green:          #4a7a20;
  --green-light:    #6ab030;
  --red:            #8a2010;
  --red-light:      #c03020;
  --blue:           #1a4a8a;

  /* ── Ressourcen-Farben ───────────────────────────────────── */
  --res-wood:       #6b4422;
  --res-clay:       #b05820;
  --res-iron:       #6a6a78;
  --res-pop:        #2a6a1a;

  /* ── Weltkarte ───────────────────────────────────────────── */
  --map-bg:         #3d5e27;
  --map-grid:       #4a7a30;
  --map-own:        #c8862a;
  --map-ally:       #4a9a4a;
  --map-enemy:      #9a2020;
  --map-npc:        #8a7a5a;

  /* ── Typografie ──────────────────────────────────────────── */
  --font-header:    'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-ui:        Tahoma, Arial, sans-serif;
  --font-size-base: 13px;
  --font-size-sm:   11px;
  --font-size-lg:   15px;
  --font-size-h1:   20px;
  --font-size-h2:   16px;
  --font-size-h3:   14px;

  /* ── Abstände ────────────────────────────────────────────── */
  --gap-xs:   4px;
  --gap-sm:   8px;
  --gap-md:   12px;
  --gap-lg:   16px;
  --gap-xl:   24px;

  /* ── Border-Radius ───────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-panel: 0 2px 4px rgba(42,26,6,0.3);
  --shadow-inset: inset 0 1px 3px rgba(42,26,6,0.2);

  /* ── Layout ──────────────────────────────────────────────── */
  --header-height:  42px;
  --resbar-height:  30px;
  --tabnav-height:  34px;
  --sidebar-width:  160px;
}