/* ============================================================================
   Vecreal wordmark — CANONICAL implementation (rev-12). SINGLE SOURCE.
   Shape (V), metrics, and color all live HERE. Every landing page links this
   file; to change the wordmark, edit THIS FILE ONLY.

   Spec (human source of truth):
     repo-bones/design/reference-design-system.html  (.bk-wordmark + brand-mark tokens)
     repo-bones/design/component-library/wordmark.md  (rev-12)

   Markup:
     <span class="bk-wordmark size-md" role="img" aria-label="Vecreal">
       <span class="bk-v" aria-hidden="true"></span><span class="bk-text">ecreal</span><span class="bk-dot" aria-hidden="true"></span>
     </span>
   Add `dark` to the wordmark class on dark surfaces.
   ========================================================================== */
:root{
  --bk-clay:        #9C4A33;   /* V + dot, light surfaces (--clay-light) */
  --bk-clay-bright: #C68070;   /* V + dot, dark surfaces  (--clay-bright) */
  --bk-text:        #1D1D1F;   /* "ecreal", light (--text-primary) */
  --bk-text-dark:   #f7f8f8;   /* "ecreal", dark */
}

.bk-wordmark{
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;                 /* rev-10 — Bold (was Semibold 600) */
  letter-spacing: -0.04em;          /* rev-10 — bumped from -0.05em for Bold breathing */
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  font-size: 22px;
  color: var(--bk-text);
}

/* V — R4-Bw rounded silhouette (rev-11), rendered as a mask so the shape is
   defined once, here. Height 0.66em; aspect 46/39.27 from the viewBox. */
.bk-wordmark .bk-v{
  display: inline-block;
  flex-shrink: 0;
  height: 0.66em;
  aspect-ratio: 46 / 39.27;
  margin-right: -0.13em;            /* rev-11 — V-to-e interlock */
  transform: translateY(0.020em);   /* rev-11 — V overshoot, decoupled from dot */
  background-color: var(--bk-clay);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 14 46 39.27'%3E%3Cpath d='M10 15.7 L30 50.27 Q32 53.27 34 50.27 L54 15.7 Q55 14 53 14 L45 14 Q43 14 42.00 15.73 L32.75 31.70 Q32 33 31.25 31.70 L22.00 15.73 Q21 14 19 14 L11 14 Q9 14 10 15.7 Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 14 46 39.27'%3E%3Cpath d='M10 15.7 L30 50.27 Q32 53.27 34 50.27 L54 15.7 Q55 14 53 14 L45 14 Q43 14 42.00 15.73 L32.75 31.70 Q32 33 31.25 31.70 L22.00 15.73 Q21 14 19 14 L11 14 Q9 14 10 15.7 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bk-wordmark .bk-text{ color: inherit; }

/* trailing dot (rev-12) */
.bk-wordmark .bk-dot{
  display: inline-block;
  flex-shrink: 0;
  width: 0.24em;
  height: 0.24em;
  border-radius: 50%;
  background: var(--bk-clay);
  margin-left: calc(0.02em + 2px);  /* rev-12 — letter-like gap from 'l' */
  transform: translateY(0.01544em); /* rev-12 — diameter-scaled overshoot (4.35%) */
  align-self: baseline;
}

/* locked size variants (match reference-design-system.html) */
.bk-wordmark.size-hero{ font-size: 96px; }
.bk-wordmark.size-xl  { font-size: 64px; }
.bk-wordmark.size-lg  { font-size: 48px; }
.bk-wordmark.size-md  { font-size: 32px; }
.bk-wordmark.size-sm  { font-size: 22px; }
.bk-wordmark.size-xs  { font-size: 18px; }

/* dark surfaces — via the `dark` class OR a document theme attribute
   (some pages toggle html[data-theme="dark"]). Both supported here so pages
   never need their own wordmark color overrides. */
.bk-wordmark.dark,
html[data-theme="dark"] .bk-wordmark            { color: var(--bk-text-dark); }
.bk-wordmark.dark .bk-v,
html[data-theme="dark"] .bk-wordmark .bk-v      { background-color: var(--bk-clay-bright); }
.bk-wordmark.dark .bk-dot,
html[data-theme="dark"] .bk-wordmark .bk-dot    { background: var(--bk-clay-bright); }