<script setup lang="ts">
/**
 * Corrosion brand mark — segmented "C-core" reticle.
 * A bold ring split into four arc segments around a centered control node,
 * with N/E/S/W targeting ticks. Drawn in `currentColor` so it themes to the
 * active accent (set `color: var(--accent)` on a parent) and stays crisp to ~12px.
 * Source: design-system assets/mark.svg (64×64 viewBox).
 */
withDefaults(defineProps<{ size?: number | string }>(), { size: 24 })
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    role="img"
    aria-label="Corrosion"
  >
    <path d="M40.2 9.45 A24 24 0 0 1 54.6 23.8" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
    <path d="M54.6 40.2 A24 24 0 0 1 40.2 54.6" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
    <path d="M23.8 54.6 A24 24 0 0 1 9.45 40.2" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
    <path d="M9.45 23.8 A24 24 0 0 1 23.8 9.45" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
    <path d="M32 16V24M32 40V48M16 32H24M40 32H48" stroke="currentColor" stroke-width="3.6" stroke-linecap="round" />
    <circle cx="32" cy="32" r="4.4" fill="currentColor" />
  </svg>
</template>
