/* Stout Design System — brand utilities.
   The Stout mark is a chamfered TAG holding a terminal prompt: a chevron and a
   block cursor inside a tonal tag whose clipped top-right corner gives it built,
   structural character. It nods to code tags / log labels and to the name's
   sturdiness. The cursor and the tag fill carry a tone; the chevron stays warm
   white. No gradient, glow, or shadow — ever. Imported by styles.css, so
   consumers get .sds-mark / .sds-wordmark / .sds-logo for free.

   Markup contract:
     <span class="sds-mark"><i></i><i></i></span>
   The two <i> are, in order: the prompt chevron, then the block cursor.
   Tone the mark with a modifier class (.sds-mark--teal / --amber / --purple /
   --coral); default is purple. Size standalone via --sds-mark-size, or inside a
   lockup via --sds-logo-h on .sds-logo.

   No CSS custom properties are declared here beyond the two sizing knobs
   (--sds-mark-size / --sds-logo-h) so nothing leaks into the token namespace;
   tones are applied as direct property overrides per modifier class. */

.sds-mark {
  position: relative;
  flex: none;
  width: var(--sds-mark-size, var(--sds-logo-h, 40px));
  height: var(--sds-mark-size, var(--sds-logo-h, 40px));
  background: var(--sds-purple-m);            /* this layer reads as the tag border */
  clip-path: polygon(0% 0%, 70% 0%, 100% 30%, 100% 100%, 0% 100%);
  box-sizing: border-box;
}
/* tonal fill, inset to leave the edge showing as a hairline border */
.sds-mark::before {
  content: "";
  position: absolute;
  inset: calc(var(--sds-mark-size, var(--sds-logo-h, 40px)) * 0.04);
  background: var(--sds-purple-d);
  clip-path: polygon(0% 0%, 70% 0%, 100% 30%, 100% 100%, 0% 100%);
}
/* prompt chevron — warm white */
.sds-mark > i:nth-child(1) {
  position: absolute;
  left: 23%; top: 32%; width: 27%; height: 36%;
  background: var(--sds-t);
  clip-path: polygon(0% 18%, 28% 18%, 72% 50%, 28% 82%, 0% 82%, 40% 50%);
}
/* block cursor — carries the tone */
.sds-mark > i:nth-child(2) {
  position: absolute;
  left: 57%; top: 31%; width: 11.5%; height: 38%;
  background: var(--sds-purple);
  border-radius: calc(var(--sds-mark-size, var(--sds-logo-h, 40px)) * 0.035);
}

/* tone modifiers — override the three coloured layers directly */
.sds-mark--teal              { background: var(--sds-teal-m); }
.sds-mark--teal::before      { background: var(--sds-teal-d); }
.sds-mark--teal > i:nth-child(2)   { background: var(--sds-teal); }

.sds-mark--amber             { background: var(--sds-amber-m); }
.sds-mark--amber::before     { background: var(--sds-amber-d); }
.sds-mark--amber > i:nth-child(2)  { background: var(--sds-amber); }

.sds-mark--purple            { background: var(--sds-purple-m); }
.sds-mark--purple::before    { background: var(--sds-purple-d); }
.sds-mark--purple > i:nth-child(2) { background: var(--sds-purple); }

.sds-mark--coral             { background: var(--sds-coral-m); }
.sds-mark--coral::before     { background: var(--sds-coral-d); }
.sds-mark--coral > i:nth-child(2)  { background: var(--sds-coral); }

/* Cursor blink — opt-in, motion-gated */
@media (prefers-reduced-motion: no-preference) {
  .sds-mark.sds-mark--blink > i:nth-child(2) {
    animation: sds-cursor-blink 1.1s steps(1) infinite;
  }
}
@keyframes sds-cursor-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.2; } }

/* Wordmark — "Stout", Inter Semibold, tightened tracking. */
.sds-wordmark {
  font-family: var(--sds-font-sans);
  font-weight: var(--sds-w-medium);
  font-size: calc(var(--sds-logo-h, 40px) * 0.6);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--sds-t);
  white-space: nowrap;
}

/* Lockups — compose mark + wordmark. Size the whole lockup via --sds-logo-h. */
.sds-logo {
  --sds-logo-h: 40px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--sds-logo-h) * 0.34);
}

.sds-logo--stacked {
  flex-direction: column;
  gap: calc(var(--sds-logo-h) * 0.3);
  text-align: center;
}