/*
 * GoggleOps — shared header brand component (GG-1)
 * Single source of truth for plugin header branding.
 *
 * Brand: two-tone wordmark on dark background — white prefix + GoggleOps-blue
 * "Goggles" segment, mirroring the logo (shell/static/goggleops-logo.svg:
 * "Goggle" #6c63ff + "Ops" #ffffff).
 *
 * Usage (identical block in every plugin header):
 *   <link rel="stylesheet" href="/static/css/goggles-header.css">
 *   <div class="goggles-brand">
 *     <span class="goggles-icon">🔧</span>
 *     <div class="goggles-titles">
 *       <div class="goggles-wordmark">Infra<span class="gg">Goggles</span></div>
 *       <div class="goggles-subtitle">One-line description</div>
 *     </div>
 *   </div>
 *
 * Zero per-plugin overrides — restyle via these tokens only.
 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --header-primary: #6c63ff;      /* GoggleOps blue */
  --header-secondary: #ffffff;    /* white */
  --header-font: 'Space Grotesk', sans-serif;
  --header-size: 18px;
  --header-icon-size: 20px;
  --header-subtitle-size: 10px;
  --header-subtitle-color: #8888aa;

  /* spacing */
  --header-icon-gap: 10px;
  --header-title-gap: 2px;
}

/* Brand block: icon + stacked title/description */
.goggles-brand  { display: flex; align-items: center; gap: var(--header-icon-gap); }
.goggles-icon {
  font-size: var(--header-icon-size);
  line-height: 1;
  /* text glyph icons (e.g. ">_") pick up brand font + blue; emoji ignore both */
  font-family: var(--header-font);
  font-weight: 700;
  color: var(--header-primary);
}
.goggles-titles { display: flex; flex-direction: column; gap: var(--header-title-gap); }

.goggles-wordmark {
  font-family: var(--header-font);
  font-size: var(--header-size);
  font-weight: 700;
  line-height: 1.1;
  color: var(--header-secondary);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.goggles-wordmark .gg { color: var(--header-primary); }

.goggles-subtitle {
  font-family: var(--header-font);
  font-size: var(--header-subtitle-size);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--header-subtitle-color);
  white-space: nowrap;
}