/* ============================================================
   GlintGG sub-brand lockups — PRO / EDGE / GRADE
   Canonical, reusable badge component. SINGLE SOURCE OF TRUTH for the web.
   Link this file; never re-style the badges per surface.

   Mirrors the mobile app exactly:
     mobile/lib/core/widgets/app_primitives.dart
       → AppProBadge          (PRO)
       → AppProductWordmark   (EDGE, GRADE)

   Construction is identical for all three — only the palette changes, so the
   family reads as one system:
     • squared chip, 6px corner radius   (mobile AppTheme.radiusSM)
     • a per-product gradient RIM        (1.2px, masked border)
     • a softly tinted interior FILL     (product tints over surface-1)
     • premium INK text                  (Satoshi, heavy)
     • a soft colored GLOW

   Palettes (dark surfaces — the product is dark-first):
     PRO    rim lavender → sky → mint → gold (product-holo)   ink #FFF3B8
     EDGE   rim gold ↔ cyan                                   ink #CFFAFF
     GRADE  rim lavender ↔ cyan                               ink #E9E1FF

   USAGE — always a lockup: the word "GlintGG" + the badge, never the badge
   alone. Sizes: default (inline/body), `lg` (section headers), `xl` (hero).

     <span class="gg-lockup">GlintGG <span class="gg-badge edge">EDGE</span></span>
     <span class="gg-lockup">GlintGG <span class="gg-badge pro lg">PRO</span></span>

   REQUIRES the host page to provide the "Satoshi" @font-face. Optionally reads
   --surface-1 (the badge interior base); falls back to #111827 if unset.
   ============================================================ */

.gg-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.gg-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.62rem;
  border-radius: 6px; /* AppTheme.radiusSM — squared, not pill */
  font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--gg-badge-ink);
  background: var(--gg-badge-fill);
  box-shadow: var(--gg-badge-glow);
}

.gg-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: var(--gg-badge-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.gg-badge.pro {
  --gg-badge-ink: #fff3b8;
  --gg-badge-rim: linear-gradient(135deg, #b9a7ff, #5ce1e6, #7ee36c, #ffe156);
  --gg-badge-fill: linear-gradient(
      135deg,
      rgb(255 225 86 / 16%),
      rgb(185 167 255 / 13%),
      rgb(92 225 230 / 11%)
    ),
    var(--surface-1, #111827);
  --gg-badge-glow: 0 2px 12px rgb(255 225 86 / 16%), 0 1px 8px rgb(92 225 230 / 9%);
}

.gg-badge.edge {
  --gg-badge-ink: #cffaff;
  --gg-badge-rim: linear-gradient(135deg, #ffe156, #55d6ff, #ffe156);
  --gg-badge-fill: linear-gradient(
      135deg,
      rgb(255 225 86 / 15%),
      rgb(85 214 255 / 13%),
      rgb(255 225 86 / 10%)
    ),
    var(--surface-1, #111827);
  --gg-badge-glow: 0 2px 14px rgb(255 225 86 / 16%);
}

.gg-badge.grade {
  --gg-badge-ink: #e9e1ff;
  --gg-badge-rim: linear-gradient(135deg, #b9a7ff, #55d6ff, #b9a7ff);
  --gg-badge-fill: linear-gradient(
      135deg,
      rgb(185 167 255 / 17%),
      rgb(85 214 255 / 13%),
      rgb(185 167 255 / 10%)
    ),
    var(--surface-1, #111827);
  --gg-badge-glow: 0 2px 14px rgb(185 167 255 / 18%);
}

/* Section-header size (e.g. paywall feature heads). */
.gg-badge.lg {
  padding: 0.44rem 0.85rem;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  font-weight: 900;
  border-radius: 8px;
}

/* Hero size (e.g. the headline Edge/Grade pair on the Pro band). */
.gg-badge.xl {
  padding: 0.5rem 1rem;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  font-weight: 900;
  border-radius: 9px;
}