/* badge-themes.css — 7-theme CSS token bundles for the PoC badge component.
   All rules scoped to .badge-frame[data-badge-theme="X"] so that badge token
   variables (prefixed --badge-*) never bleed into the chat skin tokens.
   Lifted from badge-prototype/sparks-badge.html and adapted.
   Wave 7 A.2 */

/* ── Badge frame base (shared by all themes) ── */
.badge-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1.2rem 1.4rem 1rem;
  border-radius: var(--badge-card-radius, 16px);
  background: var(--badge-bg-card, #0e0e20);
  border: 1px solid var(--badge-rule, rgba(233,194,106,0.18));
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 16px 48px rgba(0,0,0,0.45),
    0 0 40px var(--badge-glow-amber, rgba(224,122,31,0.14));
  overflow: hidden;
  position: relative;
  font-family: var(--badge-font-sans, 'Inter', system-ui, sans-serif);
  color: var(--badge-text, #E8DFCB);
  transition: box-shadow 0.3s ease;
}

/* Brand line */
.badge-brand {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.1rem;
}
.badge-brand__name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--badge-gold, #E9C26A);
  text-shadow: 0 0 12px var(--badge-glow-gold, rgba(233,194,106,0.35));
}

/* Tagline block — footer position (appended last in DOM, sits below score line) */
.badge-tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 0.4rem;
  margin-bottom: 0;
  border-top: 1px solid var(--badge-rule, rgba(233,194,106,0.12));
  padding-top: 0.35rem;
  width: 100%;
}
.badge-tagline__eyebrow {
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--badge-text-dim, rgba(232,223,203,0.45));
}
.badge-tagline__motto {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: var(--badge-display-weight, 500);
  font-style: var(--badge-display-style, italic);
  letter-spacing: 0.04em;
  color: var(--badge-champagne, #F1E0B0);
}
.badge-tagline__word {
  color: var(--badge-gold, #E9C26A);
}
.badge-tagline__sep::before {
  content: "·";
  color: var(--badge-rule-strong, rgba(233,194,106,0.32));
  opacity: 0.7;
}

/* Badge title (Core AI Fluency) */
.badge-title {
  font-size: 1.6rem;
  font-weight: var(--badge-display-weight, 500);
  font-style: var(--badge-display-style, italic);
  letter-spacing: var(--badge-display-tracking, 0.10em);
  background: linear-gradient(180deg, var(--badge-gold-light,#FBEAB6) 0%, var(--badge-gold-bright,#F5D98A) 40%, var(--badge-gold,#E9C26A) 70%, var(--badge-amber-warm,#C8651A) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  text-align: center;
  margin: 0.1rem 0 0;
}

/* Subtitle */
.badge-subtitle {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--badge-text-dim, rgba(232,223,203,0.45));
  margin-bottom: 0.4rem;
}

/* Radar wrap — relative positioned so center overlay can float */
.badge-radar-wrap {
  position: relative;
  width: 100%;
}
.badge-radar-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Center score overlay */
.badge-center-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  gap: 0;
  z-index: 3;
}
.badge-center-tier {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--badge-gold, #E9C26A);
  padding: 2px 8px 1px;
  border: 1px solid var(--badge-tier-pill-border, rgba(233,194,106,0.25));
  border-radius: 999px;
  background: var(--badge-tier-pill-bg, rgba(233,194,106,0.04));
  margin-bottom: 3px;
  white-space: nowrap;
}
.badge-center-label {
  font-size: 0.44rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--badge-text-faint, rgba(232,223,203,0.28));
  text-transform: uppercase;
  margin-top: 2px;
}

/* Per-dimension band list — the primary readable artifact (ships with every
   theme inside .badge-frame). The band WORD is the signal: colour-blind / mobile
   fallback per J.4, never colour alone. Compact two-column rows: SPARKS
   dimension name (left) + band chip (right). */
.band-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  width: 100%;
  max-width: 19rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--badge-font-sans, 'Inter', system-ui, sans-serif);
}
.band-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 2px 0;
  border-bottom: 1px solid var(--badge-rule, rgba(233,194,106,0.18));
}
.band-list__row:last-child {
  border-bottom: none;
}
.band-list__dim {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--badge-text-dim, rgba(232,223,203,0.55));
  white-space: nowrap;
}
.band-list__band {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--badge-text, #E8DFCB);
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--badge-rule-strong, rgba(233,194,106,0.32));
  background: var(--badge-band-chip-bg, rgba(233,194,106,0.06));
  white-space: nowrap;
  /* Fill intensity climbs Early → Strong so the gradient reads at a glance,
     but the WORD always carries the meaning. */
  --band-fill: 0;
  background: color-mix(in srgb, var(--badge-amber, #E07A1F) calc(var(--band-fill) * 1%), transparent);
}
.band-list__band--strong     { --band-fill: 26; }
.band-list__band--solid      { --band-fill: 19; }
.band-list__band--building   { --band-fill: 13; }
.band-list__band--developing { --band-fill: 8;  }
.band-list__band--early      { --band-fill: 4;  }

/* Mobile: the band list is the fallback artifact — keep it legible and let rows
   wrap rather than overflow. */
@media (max-width: 480px) {
  .band-list {
    max-width: 100%;
  }
  .band-list__dim {
    font-size: 0.58rem;
  }
  .band-list__band {
    font-size: 0.56rem;
    padding: 1px 7px;
  }
}

/* Category eyebrow — sits directly under the brand line */
.badge-eyebrow {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--badge-text-dim, rgba(232,223,203,0.55));
  text-align: center;
  margin-bottom: 0.05rem;
}

/* Archetype band — prominent hero block below the band list */
.badge-archetype-band {
  width: 100%;
  max-width: 19rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--badge-rule-strong, rgba(233,194,106,0.32));
  border-radius: 6px;
  background: var(--badge-band-chip-bg, rgba(233,194,106,0.04));
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.badge-archetype-band__name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--badge-gold, #E9C26A);
}
.badge-archetype-band__identity {
  font-size: 0.65rem;
  font-style: italic;
  color: var(--badge-text-dim, rgba(232,223,203,0.65));
  line-height: 1.35;
}
.badge-archetype-band__frame {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--badge-text-faint, rgba(232,223,203,0.42));
  margin-top: 0.1rem;
}

/* Small Score line — secondary weight, always paired with "indicative" */
.badge-score {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--badge-text-dim, rgba(232,223,203,0.50));
  text-align: center;
  margin-top: 0.25rem;
}

/* Legacy thin archetype footer — kept for backward compat if called without new params */
.badge-archetype {
  font-size: 0.75rem;
  opacity: 0.75;
  letter-spacing: 0.04em;
  text-align: center;
  margin-top: 0.2rem;
}


/* ════════════════════════════════════════════════
   THEME TOKENS — all scoped to .badge-frame[data-badge-theme="X"]
   Variables prefixed --badge- to avoid collision with skin tokens.
   ════════════════════════════════════════════════ */

/* ── Atelier (default, ornate gold-on-ink) ── */
.badge-frame[data-badge-theme="atelier"] {
  --badge-bg:             #060611;
  --badge-bg-card:        #0e0e20;
  --badge-ink:            #050510;
  --badge-amber-deep:     #8B4A07;
  --badge-amber:          #E07A1F;
  --badge-amber-warm:     #C8651A;
  --badge-gold:           #E9C26A;
  --badge-gold-bright:    #F5D98A;
  --badge-gold-light:     #FBEAB6;
  --badge-champagne:      #F1E0B0;
  --badge-text:           #E8DFCB;
  --badge-text-dim:       rgba(232,223,203,0.62);
  --badge-text-faint:     rgba(232,223,203,0.28);
  --badge-rule:           rgba(233,194,106,0.18);
  --badge-rule-strong:    rgba(233,194,106,0.32);
  --badge-glow-amber:     rgba(224,122,31,0.55);
  --badge-glow-gold:      rgba(233,194,106,0.35);
  --badge-tier-pill-bg:   rgba(233,194,106,0.04);
  --badge-tier-pill-border: rgba(233,194,106,0.25);
  --badge-card-radius:    20px;
  --badge-font-sans:      'Inter', system-ui, sans-serif;
  --badge-display-weight: 500;
  --badge-display-style:  italic;
  --badge-display-tracking: 0.10em;
}

/* ── Stadium (FIFA-style bold sport card) ── */
.badge-frame[data-badge-theme="stadium"] {
  --badge-bg:             #050d1a;
  --badge-bg-card:        #0d1f33;
  --badge-amber-deep:     #8A6914;
  --badge-amber:          #D4AF37;
  --badge-amber-warm:     #B89020;
  --badge-gold:           #E5C766;
  --badge-gold-bright:    #FFE69A;
  --badge-gold-light:     #FFF1B8;
  --badge-champagne:      #F4EAC4;
  --badge-text:           #F2E7C3;
  --badge-text-dim:       rgba(242,231,195,0.55);
  --badge-text-faint:     rgba(242,231,195,0.38);
  --badge-rule:           rgba(229,199,102,0.30);
  --badge-rule-strong:    rgba(229,199,102,0.55);
  --badge-glow-amber:     rgba(212,175,55,0.55);
  --badge-glow-gold:      rgba(229,199,102,0.45);
  --badge-tier-pill-bg:   rgba(79,195,220,0.12);
  --badge-tier-pill-border: rgba(79,195,220,0.45);
  --badge-card-radius:    12px;
  --badge-font-sans:      'Oswald', 'Inter', system-ui, sans-serif;
  --badge-display-weight: 700;
  --badge-display-style:  normal;
  --badge-display-tracking: 0.06em;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 20px 60px rgba(0,0,0,0.6),
    0 0 30px rgba(229,199,102,0.06);
}
.badge-frame[data-badge-theme="stadium"] .badge-title {
  text-transform: uppercase;
}
.badge-frame[data-badge-theme="stadium"] .badge-center-tier {
  color: #7FE4F2;
  border-color: rgba(79,195,220,0.45);
}
.badge-frame[data-badge-theme="stadium"] .badge-tagline__motto {
  font-family: 'Oswald', 'Inter', sans-serif;
  text-transform: uppercase;
}

/* ── Sectors (Opta-style analytics, polar bars, light card) ── */
.badge-frame[data-badge-theme="sectors"] {
  --badge-bg:             #0a0b14;
  --badge-bg-card:        #F4F1EA;
  --badge-amber:          #C84A2C;
  --badge-amber-warm:     #A03B22;
  --badge-amber-deep:     #6F2814;
  --badge-gold:           #1A1814;
  --badge-gold-bright:    #1A1814;
  --badge-gold-light:     #1A1814;
  --badge-champagne:      #1A1814;
  --badge-text:           #1A1814;
  --badge-text-dim:       rgba(26,24,20,0.60);
  --badge-text-faint:     rgba(26,24,20,0.40);
  --badge-rule:           rgba(26,24,20,0.18);
  --badge-rule-strong:    rgba(26,24,20,0.40);
  --badge-glow-amber:     rgba(200,74,44,0.08);
  --badge-glow-gold:      rgba(26,24,20,0.04);
  --badge-tier-pill-bg:   #1A1814;
  --badge-tier-pill-border: #1A1814;
  --badge-card-radius:    14px;
  --badge-font-sans:      'Inter', system-ui, sans-serif;
  --badge-display-weight: 800;
  --badge-display-style:  normal;
  --badge-display-tracking: -0.015em;
  box-shadow:
    0 0 0 1px rgba(26,24,20,0.12),
    0 10px 30px rgba(26,24,20,0.10);
}
.badge-frame[data-badge-theme="sectors"] .badge-title {
  background: none;
  -webkit-text-fill-color: #1A1814;
  color: #1A1814;
  filter: none;
}
.badge-frame[data-badge-theme="sectors"] .badge-brand__name {
  color: #1A1814;
  text-shadow: none;
}
.badge-frame[data-badge-theme="sectors"] .badge-center-tier {
  color: #FFFFFF;
  background: #1A1814;
  border-color: #1A1814;
}

/* ── Editorial (cream, refined magazine) ── */
.badge-frame[data-badge-theme="editorial"] {
  --badge-bg:             #1A1814;
  --badge-bg-card:        #F5EFE2;
  --badge-amber:          #7C3618;
  --badge-amber-warm:     #6E2F14;
  --badge-amber-deep:     #5C2914;
  --badge-gold:           #1F1B16;
  --badge-gold-bright:    #1F1B16;
  --badge-gold-light:     #1F1B16;
  --badge-champagne:      #1F1B16;
  --badge-text:           #1F1B16;
  --badge-text-dim:       rgba(31,27,22,0.62);
  --badge-text-faint:     rgba(31,27,22,0.42);
  --badge-rule:           rgba(31,27,22,0.22);
  --badge-rule-strong:    rgba(31,27,22,0.50);
  --badge-glow-amber:     rgba(124,33,24,0.06);
  --badge-glow-gold:      rgba(31,27,22,0.04);
  --badge-tier-pill-bg:   rgba(124,33,24,0.08);
  --badge-tier-pill-border: rgba(124,33,24,0.35);
  --badge-card-radius:    4px;
  --badge-font-sans:      'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --badge-font-serif:     'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --badge-display-weight: 500;
  --badge-display-style:  italic;
  --badge-display-tracking: 0.01em;
  box-shadow:
    0 0 0 1px rgba(31,27,22,0.12),
    0 10px 30px rgba(31,27,22,0.10);
}
.badge-frame[data-badge-theme="editorial"] .badge-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  background: none;
  -webkit-text-fill-color: #1F1B16;
  color: #1F1B16;
  filter: none;
}
.badge-frame[data-badge-theme="editorial"] .badge-brand__name {
  color: #7C3618;
  text-shadow: none;
}
.badge-frame[data-badge-theme="editorial"] .badge-center-tier {
  color: #1F1B16;
  background: rgba(31,27,22,0.06);
  border-color: rgba(31,27,22,0.40);
}

/* ── Cyber (synthwave neon) ── */
.badge-frame[data-badge-theme="cyber"] {
  --badge-bg:             #03020a;
  --badge-bg-card:        #08071a;
  --badge-amber:          #FF00C8;
  --badge-amber-warm:     #D000A8;
  --badge-amber-deep:     #6E0058;
  --badge-gold:           #00F0FF;
  --badge-gold-bright:    #6EFAFF;
  --badge-gold-light:     #B0FCFF;
  --badge-champagne:      #DFFEFF;
  --badge-text:           #DFFEFF;
  --badge-text-dim:       rgba(223,254,255,0.55);
  --badge-text-faint:     rgba(223,254,255,0.32);
  --badge-rule:           rgba(0,240,255,0.28);
  --badge-rule-strong:    rgba(0,240,255,0.55);
  --badge-glow-amber:     rgba(255,0,200,0.45);
  --badge-glow-gold:      rgba(0,240,255,0.45);
  --badge-tier-pill-bg:   rgba(255,0,200,0.12);
  --badge-tier-pill-border: rgba(255,0,200,0.50);
  --badge-card-radius:    6px;
  --badge-font-sans:      'Oswald', 'Inter', system-ui, sans-serif;
  --badge-font-mono:      'JetBrains Mono', ui-monospace, monospace;
  --badge-display-weight: 600;
  --badge-display-style:  normal;
  --badge-display-tracking: 0.18em;
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.18),
    0 0 40px rgba(0,240,255,0.12),
    0 0 80px rgba(255,0,200,0.08);
}
.badge-frame[data-badge-theme="cyber"] .badge-center-tier {
  color: #6EFAFF;
  background: rgba(0,240,255,0.10);
  border-color: rgba(0,240,255,0.45);
  box-shadow: 0 0 10px rgba(0,240,255,0.30);
}
.badge-frame[data-badge-theme="cyber"] .badge-tagline__sep::before {
  content: "//";
  color: #FF00C8;
}

/* ── Mono (pure black & white brutalist) ── */
.badge-frame[data-badge-theme="mono"] {
  --badge-bg:             #000000;
  --badge-bg-card:        #0a0a0a;
  --badge-amber:          #ffffff;
  --badge-amber-warm:     #d8d8d8;
  --badge-amber-deep:     #555555;
  --badge-gold:           #ffffff;
  --badge-gold-bright:    #ffffff;
  --badge-gold-light:     #f0f0f0;
  --badge-champagne:      #f0f0f0;
  --badge-text:           #f0f0f0;
  --badge-text-dim:       rgba(240,240,240,0.55);
  --badge-text-faint:     rgba(240,240,240,0.30);
  --badge-rule:           rgba(255,255,255,0.22);
  --badge-rule-strong:    rgba(255,255,255,0.50);
  --badge-glow-amber:     rgba(255,255,255,0.04);
  --badge-glow-gold:      rgba(255,255,255,0.04);
  --badge-tier-pill-bg:   rgba(255,255,255,0.08);
  --badge-tier-pill-border: rgba(255,255,255,0.35);
  --badge-card-radius:    0px;
  --badge-font-sans:      'Inter', system-ui, sans-serif;
  --badge-display-weight: 900;
  --badge-display-style:  normal;
  --badge-display-tracking: -0.02em;
}

/* ── Brutalist (neo-brutalist, yellow card, hard shadow) ── */
.badge-frame[data-badge-theme="brutalist"] {
  --badge-bg:             #FFD600;
  --badge-bg-card:        #FFFFFF;
  --badge-amber:          #FF2D2D;
  --badge-amber-warm:     #E01010;
  --badge-amber-deep:     #8A0000;
  --badge-gold:           #000000;
  --badge-gold-bright:    #000000;
  --badge-gold-light:     #000000;
  --badge-champagne:      #000000;
  --badge-text:           #000000;
  --badge-text-dim:       rgba(0,0,0,0.75);
  --badge-text-faint:     rgba(0,0,0,0.55);
  --badge-rule:           rgba(0,0,0,1);
  --badge-rule-strong:    rgba(0,0,0,1);
  --badge-glow-amber:     transparent;
  --badge-glow-gold:      transparent;
  --badge-tier-pill-bg:   #FFD600;
  --badge-tier-pill-border: #000000;
  --badge-card-radius:    0px;
  --badge-font-sans:      'Inter', system-ui, sans-serif;
  --badge-display-weight: 900;
  --badge-display-style:  normal;
  --badge-display-tracking: -0.025em;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 0 #000;
}
.badge-frame[data-badge-theme="brutalist"] .badge-title {
  background: none;
  -webkit-text-fill-color: #000;
  color: #000;
  filter: none;
  font-weight: 900;
}
.badge-frame[data-badge-theme="brutalist"] .badge-brand__name {
  color: #000;
  text-shadow: none;
  background: #FFD600;
  padding: 0.15em 0.5em;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 0 #000;
  letter-spacing: 0.18em;
}
.badge-frame[data-badge-theme="brutalist"] .badge-center-tier {
  color: #FFF;
  background: #000;
  border-color: #000;
  border-radius: 0;
  font-weight: 800;
}
.badge-frame[data-badge-theme="brutalist"] .badge-center-label {
  color: rgba(0,0,0,0.65);
}
.badge-frame[data-badge-theme="brutalist"] .badge-tagline__eyebrow {
  color: #000;
  background: #FF2D2D;
  padding: 0.12em 0.5em;
  font-weight: 800;
  border: 2px solid #000;
  letter-spacing: 0.32em;
}
.badge-frame[data-badge-theme="brutalist"] .badge-tagline__word {
  color: #000;
}
.badge-frame[data-badge-theme="brutalist"] .badge-tagline__sep::before {
  content: "/";
  color: #FF2D2D;
  opacity: 1;
  font-weight: 900;
}
.badge-frame[data-badge-theme="brutalist"] .band-list__band {
  border: 2px solid #000;
  border-radius: 0;
  box-shadow: 2px 2px 0 0 #000;
  color: #000;
  font-weight: 800;
}
.badge-frame[data-badge-theme="brutalist"] .band-list__row {
  border-bottom-color: rgba(0,0,0,0.25);
}