/* =============================================================================
   @elements/style — brand

   The Elements mark + wordmark. Sky-filled square with a white `>` glyph
   in IBM Plex Mono 700. The wordmark is lowercase, always.

   Proportions (from notes/brand.html):
     corner radius  = size × 0.15   (16%)
     glyph size     = size × 0.6    (60%)
     padding-bottom = size / 16     (compensates for `>` sitting high)

   Size ladder classes:
     .brand-mark-16 / 20 / 24 / 26 / 32 / 48 / 64 / 96 / 128 / 256

   Lockup classes pair a mark + wordmark at coordinated sizes:
     .brand-sm  — 24px mark, 15px wordmark  (topbars, most common)
     .brand-md  — 34px mark, 22px wordmark
     .brand-lg  — 48px mark, 32px wordmark  (hero)
     .brand-xl  — 72px mark, 48px wordmark  (splash, display)

   The wordmark is ALWAYS weight 600, lowercase, letter-spacing -0.01em.
============================================================================= */

/* ─── The mark (box + glyph) ─────────────────────────────────────── */

.brand-mark {
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  line-height: 1;
  flex-shrink: 0;
}

/* Sky override — use when the Elements brand color is required regardless
   of the page's --accent. Primary use: the "Built with Elements" footer
   credit on customer pages, which must render sky even when --accent = ink. */
.brand-mark.is-sky { background: var(--sky); }

/* Size variants — generated from: w/h, radius=size*0.15, font=size*0.6,
   padding-bottom=size/16 (rounded to sensible pixel values). */

.brand-mark-16  { width: 16px;  height: 16px;  border-radius: 2.5px; font-size: 10px;  padding-bottom: 1px; }
.brand-mark-20  { width: 20px;  height: 20px;  border-radius: 3px;   font-size: 12px;  padding-bottom: 1px; }
.brand-mark-24  { width: 24px;  height: 24px;  border-radius: 4px;   font-size: 14px;  padding-bottom: 2px; }
.brand-mark-26  { width: 26px;  height: 26px;  border-radius: 5px;   font-size: 15px;  padding-bottom: 2px; }
.brand-mark-32  { width: 32px;  height: 32px;  border-radius: 5px;   font-size: 18px;  padding-bottom: 2px; }
.brand-mark-34  { width: 34px;  height: 34px;  border-radius: 6px;   font-size: 20px;  padding-bottom: 2px; }
.brand-mark-48  { width: 48px;  height: 48px;  border-radius: 8px;   font-size: 28px;  padding-bottom: 3px; }
.brand-mark-64  { width: 64px;  height: 64px;  border-radius: 10px;  font-size: 38px;  padding-bottom: 4px; }
.brand-mark-72  { width: 72px;  height: 72px;  border-radius: 12px;  font-size: 44px;  padding-bottom: 5px; }
.brand-mark-96  { width: 96px;  height: 96px;  border-radius: 14px;  font-size: 56px;  padding-bottom: 5px; }
.brand-mark-128 { width: 128px; height: 128px; border-radius: 20px;  font-size: 76px;  padding-bottom: 7px; }
.brand-mark-256 { width: 256px; height: 256px; border-radius: 40px;  font-size: 152px; padding-bottom: 14px; }

/* ─── The lockup (mark + wordmark) ───────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-normal);
  color: var(--ink);
  text-decoration: none;
}

/* Coordinated sizes. Each sets both the wordmark scale and the mark via
   an internal selector so you can use `.brand .brand-sm` shorthand too. */

.brand-sm     { font-size: 15px; }
.brand-sm .brand-mark { width: 24px; height: 24px; border-radius: 4px; font-size: 14px; padding-bottom: 2px; }

.brand-md     { font-size: 22px; letter-spacing: -0.015em; }
.brand-md .brand-mark { width: 34px; height: 34px; border-radius: 6px; font-size: 20px; padding-bottom: 2px; }

.brand-lg     { font-size: 32px; letter-spacing: -0.02em; }
.brand-lg .brand-mark { width: 48px; height: 48px; border-radius: 8px; font-size: 28px; padding-bottom: 3px; }

.brand-xl     { font-size: 48px; letter-spacing: -0.025em; }
.brand-xl .brand-mark { width: 72px; height: 72px; border-radius: 12px; font-size: 44px; padding-bottom: 5px; }

/* Footer size — tiny */
.brand-xs     { font-size: 11.5px; gap: 0.5rem; }
.brand-xs .brand-mark { width: 16px; height: 16px; border-radius: 3px; font-size: 10px; padding-bottom: 1px; }