<template>
  <svg
    width="40"
    height="40"
    viewBox="0 0 40 40"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    role="img"
    aria-label="HMS Licht & Ton Logo"
  >
    <rect
      x="1"
      y="1"
      width="38"
      height="38"
      rx="4"
      :stroke="accentColor"
      stroke-width="2"
      fill="#1a1a1a"
    />
    <text
      x="20"
      y="16"
      text-anchor="middle"
      fill="#ffffff"
      font-family="Inter, sans-serif"
      font-size="11"
      font-weight="800"
    >HMS</text>
    <path
      d="M8 22 L12 26 L8 30"
      :stroke="accentColor"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round"
      fill="none"
    />
    <path
      d="M14 22 L18 26 L14 30"
      :stroke="accentColor"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round"
      fill="none"
    />
    <path
      d="M20 22 L24 26 L20 30"
      :stroke="accentColor"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round"
      fill="none"
    />
    <text
      x="20"
      y="36"
      text-anchor="middle"
      fill="#d4d4d4"
      font-family="Inter, sans-serif"
      font-size="5"
      font-weight="500"
    >LICHT &amp; TON</text>
  </svg>
</template>

<script setup lang="ts">
const accentColor: string = "#EC6925";
</script>
