/* ============================================================================
 * thesa-theme.css — Thesa Blazor Designer Skill v1.0
 * Drop into: wwwroot/css/thesa-theme.css
 * Companion to: thesa-blazor-designer-SKILL.md
 * ========================================================================== */

/* -- 1. Tokens ------------------------------------------------------------- */
:root {
  /* Core palette */
  --thesa-ink:         #0B1F3A;
  --thesa-ink-2:       #13294D;
  --thesa-ink-3:       #1E3A64;
  --thesa-ink-deep:    #061428;
  --thesa-paper:       #FAF8F4;
  --thesa-paper-2:     #F2EEE6;
  --thesa-line:        #E5E0D3;
  --thesa-line-2:      #D4CDBA;
  --thesa-muted:       #6B6B6B;
  --thesa-text:        #1F2937;

  /* Gold + ember (signature warmth) */
  --thesa-gold:        #C9A961;
  --thesa-gold-2:      #B8943E;
  --thesa-gold-soft:   #F5EFE0;
  --thesa-ember:       #D9762E;

  /* Status */
  --thesa-red:         #DC2626;
  --thesa-red-soft:    #FEE2E2;
  --thesa-amber:       #D97706;
  --thesa-amber-soft:  #FEF3C7;
  --thesa-green:       #059669;
  --thesa-green-soft:  #D1FAE5;

  /* Zambia flag (decorative only — strips + ZM regulator chips) */
  --thesa-zm-green:    #198A00;
  --thesa-zm-red:      #DE2010;
  --thesa-zm-black:    #000000;
  --thesa-zm-orange:   #EF7D00;

  /* Typography */
  --thesa-font-display: 'Fraunces', ui-serif, Georgia, serif;
  --thesa-font-body:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --thesa-font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  --thesa-text-mono-9:   9px;
  --thesa-text-mono-10: 10px;
  --thesa-text-mono-11: 11px;
  --thesa-text-body-sm: 14px;
  --thesa-text-body:    16px;
  --thesa-text-h4:    1.2rem;
  --thesa-text-h3:    1.6rem;
  --thesa-text-h2:    3rem;
  --thesa-text-h1:    4.8rem;
  --thesa-text-kpi:    2.2rem;
  --thesa-text-kpi-lg: 3.6rem;

  /* Spacing */
  --thesa-space-1:   4px;
  --thesa-space-2:   8px;
  --thesa-space-3:  12px;
  --thesa-space-4:  16px;
  --thesa-space-5:  24px;
  --thesa-space-6:  32px;
  --thesa-space-7:  48px;
  --thesa-space-8:  80px;
  --thesa-space-9: 100px;

  /* Radii */
  --thesa-radius-sm:    2px;
  --thesa-radius-md:    4px;
  --thesa-radius-lg:    8px;
  --thesa-radius-pill: 9999px;

  /* Layout rhythm */
  --thesa-section-gap: 48px;
  --thesa-card-padding: 24px;

  /* Shadows (hover-only — never static) */
  --thesa-shadow-hover:       0 4px 14px rgba(0, 0, 0, .04);
  --thesa-shadow-cta:         0 8px 24px rgba(0, 0, 0, .05);
  --thesa-shadow-aurora-glow: 0 24px 60px rgba(201, 169, 97, .12);

  /* Signature gradient */
  --thesa-gradient:      linear-gradient(30deg, #C9A961 0%, #D9762E 50%, #0B1F3A 100%);
  --thesa-gradient-soft: linear-gradient(30deg, #F5EFE0, #C9A961);
  --thesa-gradient-deep: linear-gradient(30deg, #C9A961, #B8943E, #0B1F3A);
  --thesa-gradient-ink:  radial-gradient(ellipse at 20% 30%, #1a3766 0%, #0B1F3A 60%);
}

/* -- 2. MudBlazor variable remap ------------------------------------------- */
/* Override Mud's CSS variables so any unstyled MudComponent inherits Thesa. */
:root {
  --mud-palette-primary:           var(--thesa-ink);
  --mud-palette-secondary:         var(--thesa-gold);
  --mud-palette-tertiary:          var(--thesa-ember);
  --mud-palette-background:        var(--thesa-paper);
  --mud-palette-surface:           #ffffff;
  --mud-palette-appbar-background: rgba(250, 248, 244, 0.85);
  --mud-palette-drawer-background: var(--thesa-ink);
  --mud-palette-drawer-text:       rgba(255, 255, 255, 0.75);
  --mud-palette-text-primary:      var(--thesa-text);
  --mud-palette-text-secondary:    var(--thesa-muted);
  --mud-palette-lines-default:     var(--thesa-line);
  --mud-palette-success:           var(--thesa-green);
  --mud-palette-warning:           var(--thesa-amber);
  --mud-palette-error:             var(--thesa-red);
  --mud-default-borderradius:      var(--thesa-radius-md);

  --mud-typography-default-family:    var(--thesa-font-body);
  --mud-typography-h1-family:         var(--thesa-font-display);
  --mud-typography-h2-family:         var(--thesa-font-display);
  --mud-typography-h3-family:         var(--thesa-font-display);
  --mud-typography-h4-family:         var(--thesa-font-display);
  --mud-typography-h5-family:         var(--thesa-font-display);
  --mud-typography-h6-family:         var(--thesa-font-display);
  --mud-typography-caption-family:    var(--thesa-font-mono);
  --mud-typography-caption-letterspacing: .2em;
}

/* -- 3. Base ---------------------------------------------------------------- */
html, body {
  font-family: var(--thesa-font-body);
  color: var(--thesa-text);
  background: var(--thesa-paper);
  -webkit-font-smoothing: antialiased;
}

.thesa-num,
.thesa-mono { font-variant-numeric: tabular-nums; font-family: var(--thesa-font-mono); }

/* -- 4. Eyebrow primitive --------------------------------------------------- */
.thesa-eyebrow {
  font: 500 var(--thesa-text-mono-11) / 1 var(--thesa-font-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--thesa-gold-2);
}
.thesa-eyebrow--muted { color: var(--thesa-muted); }
.thesa-eyebrow--ink   { color: var(--thesa-ink); }
.thesa-eyebrow--gold-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.thesa-eyebrow--gold-line::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--thesa-gold-2);
}

/* -- 5. Buttons ------------------------------------------------------------- */
.thesa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border: 0; cursor: pointer;
  font: 500 .88rem/1 var(--thesa-font-body);
  border-radius: var(--thesa-radius-sm);
  transition: all .15s ease;
  text-decoration: none;
}
.thesa-btn--primary  { background: var(--thesa-ink);  color: var(--thesa-paper); }
.thesa-btn--primary:hover { background: #000; }
.thesa-btn--gold     { background: var(--thesa-gold); color: var(--thesa-ink); font-weight: 600; }
.thesa-btn--gold:hover { background: var(--thesa-gold-2); color: #fff; }
.thesa-btn--gradient { background: var(--thesa-gradient); color: var(--thesa-paper); font-weight: 600; }
.thesa-btn--gradient:hover { background: var(--thesa-gradient-deep); box-shadow: var(--thesa-shadow-cta); }
.thesa-btn--ghost    { background: transparent; color: var(--thesa-ink); border: 1px solid var(--thesa-ink); }
.thesa-btn--ghost:hover { background: var(--thesa-ink); color: var(--thesa-paper); }
.thesa-btn--outline-gold {
  background: transparent; color: var(--thesa-gold);
  border: 1px solid var(--thesa-gold);
}
.thesa-btn--outline-gold:hover { background: var(--thesa-gold); color: var(--thesa-ink); }

/* -- 6. Pill (filter / suggest) -------------------------------------------- */
.thesa-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--thesa-line);
  background: #fff;
  color: var(--thesa-ink);
  font: 400 .82rem/1 var(--thesa-font-body);
  border-radius: var(--thesa-radius-pill);
  cursor: pointer;
  transition: all .15s ease;
}
.thesa-pill:hover,
.thesa-pill[aria-pressed="true"] {
  background: var(--thesa-ink); color: var(--thesa-paper); border-color: var(--thesa-ink);
}

/* -- 7. Cards --------------------------------------------------------------- */
.thesa-card {
  background: #fff;
  border: 1px solid var(--thesa-line);
  border-radius: var(--thesa-radius-md);
}
.thesa-card__head {
  padding: 20px var(--thesa-card-padding);
  border-bottom: 1px solid var(--thesa-line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.thesa-card__head h3 {
  font: 500 var(--thesa-text-h4) / 1.3 var(--thesa-font-display);
  color: var(--thesa-ink); margin: 0;
}
.thesa-card__body { padding: var(--thesa-card-padding); }

/* -- 8. KPI tile ------------------------------------------------------------ */
.thesa-kpi {
  background: #fff;
  border: 1px solid var(--thesa-line);
  padding: var(--thesa-card-padding);
  border-radius: var(--thesa-radius-md);
  position: relative; overflow: hidden;
}
.thesa-kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--thesa-gold);
}
.thesa-kpi--red::before    { background: var(--thesa-red); }
.thesa-kpi--green::before  { background: var(--thesa-green); }
.thesa-kpi--amber::before  { background: var(--thesa-amber); }
.thesa-kpi--ink::before    { background: var(--thesa-ink); }
.thesa-kpi__label {
  font: 500 var(--thesa-text-mono-10) / 1 var(--thesa-font-mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--thesa-muted);
  margin-bottom: 8px;
}
.thesa-kpi__value {
  font: 400 var(--thesa-text-kpi) / 1 var(--thesa-font-display);
  color: var(--thesa-ink); letter-spacing: -.02em; display: block;
}
.thesa-kpi__value--red { color: var(--thesa-red); }
.thesa-kpi__delta {
  font-size: .78rem; margin-top: 10px; color: var(--thesa-muted); display: block;
}
.thesa-kpi__delta--up   { color: var(--thesa-green); }
.thesa-kpi__delta--down { color: var(--thesa-red); }

/* -- 9. Chips --------------------------------------------------------------- */
.thesa-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font: 500 var(--thesa-text-mono-10) / 1.4 var(--thesa-font-mono);
  letter-spacing: .15em; text-transform: uppercase;
  border-radius: var(--thesa-radius-sm);
}
.thesa-chip--gold  { background: var(--thesa-gold-soft);  color: var(--thesa-gold-2); }
.thesa-chip--red   { background: var(--thesa-red-soft);   color: var(--thesa-red); }
.thesa-chip--amber { background: var(--thesa-amber-soft); color: var(--thesa-amber); }
.thesa-chip--green { background: var(--thesa-green-soft); color: var(--thesa-green); }
.thesa-chip--ink   { background: var(--thesa-ink);        color: var(--thesa-gold); }

/* -- 10. Inputs ------------------------------------------------------------- */
.thesa-input--underline > input,
.thesa-input--underline {
  width: 100%; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--thesa-line);
  background: transparent;
  font: 400 var(--thesa-text-body) / 1.5 var(--thesa-font-body);
  color: var(--thesa-ink); outline: none;
  transition: border-color .15s ease;
}
.thesa-input--underline:focus,
.thesa-input--underline > input:focus { border-bottom-color: var(--thesa-ink); }

.thesa-input--boxed {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--thesa-line);
  border-radius: var(--thesa-radius-md);
  background: #fff;
  font: 400 var(--thesa-text-body) / 1.5 var(--thesa-font-body);
  color: var(--thesa-ink); outline: none;
  transition: border-color .15s ease;
}
.thesa-input--boxed:focus { border-color: var(--thesa-ink); }

/* -- 11. Live indicator ---------------------------------------------------- */
.thesa-live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 var(--thesa-text-mono-10) / 1 var(--thesa-font-mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--thesa-muted);
}
.thesa-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--thesa-green);
  animation: thesa-pulse 2s ease infinite;
}
@keyframes thesa-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.85); }
}

/* -- 12. Glassmorphism ----------------------------------------------------- */
.thesa-glass--soft {
  background: rgba(250, 248, 244, .72);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(229, 224, 211, .6);
}
.thesa-glass {
  background: rgba(250, 248, 244, .82);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(229, 224, 211, .7);
}
.thesa-glass--strong {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--thesa-line);
}
.thesa-glass--dark {
  background: rgba(11, 31, 58, .72);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(201, 169, 97, .18);
  color: var(--thesa-paper);
}

/* -- 13. Aurora backdrop --------------------------------------------------- */
.thesa-aurora {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.thesa-aurora__blob {
  position: absolute; border-radius: 50%;
  filter: blur(110px); opacity: .22;
  animation: thesa-aurora-drift 18s ease-in-out infinite alternate;
}
.thesa-aurora__blob--gold  { width: 50%; height: 60%; left: -10%; top: -20%;     background: #C9A961; }
.thesa-aurora__blob--ember { width: 40%; height: 50%; right: -5%; top:  10%;     background: #D9762E; animation-delay: -6s; }
.thesa-aurora__blob--ink   { width: 55%; height: 65%; left: 25%; bottom: -30%;   background: #1a3766; animation-delay: -12s; }

.thesa-aurora--medium .thesa-aurora__blob { opacity: .40; filter: blur(90px); animation-duration: 16s; }
.thesa-aurora--full   .thesa-aurora__blob { opacity: .60; filter: blur(70px); animation-duration: 14s; }

@keyframes thesa-aurora-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6%, -4%) scale(1.08); }
}

/* -- 14. Zambia flag strip -------------------------------------------------- */
.thesa-flag-strip { display: flex; height: 3px; width: 72px; gap: 0; }
.thesa-flag-strip > span { flex: 1; }
.thesa-flag-strip > span:nth-child(1) { background: var(--thesa-zm-green); }
.thesa-flag-strip > span:nth-child(2) { background: var(--thesa-zm-red); }
.thesa-flag-strip > span:nth-child(3) { background: var(--thesa-zm-black); }
.thesa-flag-strip > span:nth-child(4) { background: var(--thesa-zm-orange); }

/* -- 15. Focus discipline (Blazor InteractiveServer guard) ----------------- */
:focus:not(:focus-visible) { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: 2px solid var(--thesa-gold);
  outline-offset: 2px;
  border-radius: var(--thesa-radius-sm);
}
h1, h2, h3, h4, h5, h6,
p, span, em, strong, small, code,
header, footer, main, aside, section, article, nav,
div {
  /* Suppress Blazor's stray focus ring on non-interactive elements after re-render. */
}
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
p:focus, span:focus, em:focus, strong:focus, small:focus, code:focus,
header:focus, footer:focus, main:focus, aside:focus, section:focus, article:focus, nav:focus {
  outline: none !important;
}

/* -- 16. Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .thesa-aurora__blob,
  .thesa-live-dot { animation: none !important; }
  * { transition-duration: .01ms !important; }
}