/* Podium — shared theme CSS.
   Font loading, themeable brand variables (drive tier/institute theming),
   named gradients, motion tokens, and the base component classes. */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap');

/* ============================================================
   THEMEABLE BRAND SLOTS
   These variables are the swappable tokens. Swapping them
   re-themes every brand surface — that is how Standard /
   Co-branded / White-label and per-institute colors work.
   ============================================================ */
:root {
  /* Display font slot (Fraunces locked default; Tweak can swap) */
  --font-display: 'Fraunces';

  /* Platform brand (the placeholder "Podium") — Standard tier defaults */
  --brand-primary: #4338CA;   /* indigo-700 */
  --brand-deep:    #1E1B4B;   /* indigo-950 */
  --brand-soft:    #6366F1;   /* indigo-500 */
  --brand-ink:     #312E81;   /* readable brand ink on light */

  /* Platform accent = GOLD. Present on Standard/Co-brand; removed in White-label. */
  --brand-accent:      #D4AF37;
  --brand-accent-deep: #B8860B;
  --brand-accent-soft: #F5D67A;
  --brand-accent-text: #7C5E10;  /* gold-as-text on light, AA */

  /* Gradient stops (recomputed when brand changes) */
  --grad-hero-a: #312E81;
  --grad-hero-b: #7E22CE;
  --grad-gold-a: #B8860B;
  --grad-gold-b: #F5D67A;
  --grad-surface-a: #1E1B4B;
  --grad-surface-b: #312E81;

  /* Gradient intensity 0..1 (Tweak) — scales gold/violet drama */
  --grad-intensity: 0.62;

  /* Motion */
  --ease-std: cubic-bezier(0.4,0,0.2,1);
}

/* Co-branded: institute color leads the primary slot; gold + platform frame stay. */
[data-tier="cobrand"] {
  --brand-primary: var(--inst-primary, #0E7490);
  --brand-deep:    var(--inst-deep, #083344);
  --brand-soft:    var(--inst-soft, #22D3EE);
  --brand-ink:     var(--inst-deep, #083344);
  --grad-hero-a:   var(--inst-deep, #083344);
  --grad-hero-b:   var(--inst-primary, #0E7490);
  --grad-surface-a: var(--inst-deep, #083344);
  --grad-surface-b: var(--inst-primary, #0E7490);
}

/* White-label: institute fully drives theme; NO platform gold/indigo, NO platform marks. */
[data-tier="whitelabel"] {
  --brand-primary: var(--inst-primary, #0E7490);
  --brand-deep:    var(--inst-deep, #083344);
  --brand-soft:    var(--inst-soft, #22D3EE);
  --brand-ink:     var(--inst-deep, #083344);
  /* gold collapses to a neutral so no platform accent leaks through */
  --brand-accent:      var(--inst-primary, #0E7490);
  --brand-accent-deep: var(--inst-deep, #083344);
  --brand-accent-soft: var(--inst-soft, #22D3EE);
  --brand-accent-text: var(--inst-deep, #083344);
  --grad-gold-a: var(--inst-deep, #083344);
  --grad-gold-b: var(--inst-primary, #0E7490);
  --grad-hero-a: var(--inst-deep, #083344);
  --grad-hero-b: var(--inst-primary, #0E7490);
  --grad-surface-a: var(--inst-deep, #083344);
  --grad-surface-b: var(--inst-primary, #0E7490);
}
.platform-only { display: inline-flex; }
[data-tier="whitelabel"] .platform-only { display: none !important; }

/* ============================================================
   GRADIENTS  (use deliberately — hero / celebration / key CTAs only)
   ============================================================ */
.grad-hero    { background-image: linear-gradient(135deg, var(--grad-hero-a), var(--grad-hero-b)); }
.grad-surface { background-image: linear-gradient(160deg, var(--grad-surface-a), var(--grad-surface-b)); }
.grad-gold    { background-image: linear-gradient(120deg, var(--grad-gold-a), var(--grad-gold-b)); }
/* Section treatment: flat removes gradients (calmer, "lighter" drama) while keeping dark legibility */
[data-sections="flat"] .grad-hero, [data-sections="flat"] .grad-surface { background-image:none !important; }
[data-sections="flat"] .grad-hero    { background-color: var(--grad-hero-b); }
[data-sections="flat"] .grad-surface { background-color: var(--brand-deep); }
.text-gold-grad {
  background-image: linear-gradient(120deg, var(--grad-gold-a), var(--grad-gold-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* scrim helper — always sits behind text over gradients/imagery (AA) */
.scrim { position: relative; }
.scrim::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,26,0) 0%, rgba(15,15,26,0.55) 100%);
  pointer-events: none;
}
.scrim > * { position: relative; }

/* ============================================================
   BASE
   ============================================================ */
* { -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', system-ui, sans-serif; color: #0F0F1A; }
.font-display { font-family: var(--font-display), 'Fraunces', serif; }
.tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* focus-visible ring — never removed (a11y) */
.focus-ring:focus-visible,
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.45);
  border-radius: 8px;
}

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:16px; line-height:1; border-radius:10px;
  padding:0 20px; height:48px; cursor:pointer; transition: all .12s var(--ease-std);
  white-space:nowrap; border:1px solid transparent; }
.btn:active { transform: scale(0.98); }
.btn-sm { height:40px; font-size:14px; padding:0 14px; border-radius:8px; }
.btn-lg { height:56px; font-size:18px; padding:0 28px; }
.btn-block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* primary on dark = gold gradient; the signature CTA */
.btn-primary { background-image:linear-gradient(120deg,var(--grad-gold-a),var(--grad-gold-b));
  color:#1E1B4B; box-shadow:0 6px 24px rgba(184,134,11,calc(0.35*var(--grad-intensity)*1.6)); }
.btn-primary:hover { box-shadow:0 8px 30px rgba(212,175,55,calc(0.5*var(--grad-intensity)*1.6)); filter:brightness(1.03); }
/* solid brand — primary CTA on light */
.btn-brand { background:var(--brand-primary); color:#fff; }
.btn-brand:hover { background:var(--brand-deep); }
.btn-secondary { background:transparent; border-color:var(--brand-primary); color:var(--brand-ink); }
.btn-secondary:hover { background:rgba(67,56,202,0.06); }
.btn-ghost { background:transparent; color:var(--brand-ink); }
.btn-ghost:hover { background:rgba(15,15,26,0.05); }
.btn-danger { background:#DC2626; color:#fff; }
.btn-danger:hover { background:#B91C1C; }
.btn-on-dark-ghost { background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.22); }
.btn-on-dark-ghost:hover { background:rgba(255,255,255,0.16); }

/* ---- Inputs ---- */
.field-label { font-size:14px; font-weight:600; color:#3F3F5A; margin-bottom:6px; display:block; }
.req::after { content:' *'; color:#DC2626; }
.input { width:100%; height:48px; border:1px solid #E5E7EB; border-radius:10px;
  padding:0 14px; font-size:16px; color:#0F0F1A; background:#fff; transition:all .12s var(--ease-std); }
.input::placeholder { color:#9CA3AF; }
.input:focus { outline:none; border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(99,102,241,0.18); }
.input.is-error { border-color:#DC2626; }
.input.is-error:focus { box-shadow:0 0 0 3px rgba(220,38,38,0.16); }
.input.is-success { border-color:#15803D; }
.input:disabled { background:#F8F7FB; color:#9CA3AF; cursor:not-allowed; }
textarea.input { height:auto; padding:12px 14px; line-height:24px; }
.help-text { font-size:12px; color:#9CA3AF; margin-top:6px; }
.error-text { font-size:12px; color:#DC2626; margin-top:6px; display:flex; align-items:center; gap:4px; }

/* ---- Cards ---- */
.card { background:#fff; border-radius:14px; box-shadow:0 1px 2px rgba(15,15,26,0.04),0 4px 16px rgba(15,15,26,0.06); }
.card-bordered { background:#fff; border-radius:14px; border:1px solid #E5E7EB; }
.card-elev { background:#fff; border-radius:14px; box-shadow:0 4px 8px rgba(15,15,26,0.06),0 16px 40px rgba(15,15,26,0.12); }

/* ---- Badges / pills ---- */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:999px; line-height:18px; }
.badge-draft     { background:#E5E7EB; color:#3F3F5A; }
.badge-scheduled { background:#E0E7FF; color:#4338CA; }
.badge-live      { background:#FCE7F3; color:#A21CAF; }
.badge-completed { background:#DCFCE7; color:#15803D; }
.badge-published { background:#D4AF37; color:#1E1B4B; }
.badge-archived  { background:#F3F4F6; color:#9CA3AF; }

/* ---- Placeholder image slot (striped, monospace caption) ---- */
.ph {
  background-color:#EEF0F6;
  background-image:repeating-linear-gradient(45deg, rgba(67,56,202,0.05) 0 10px, transparent 10px 20px);
  border:1px dashed rgba(67,56,202,0.3); border-radius:10px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; color:#6366F1; padding:12px;
}

/* live "updating" pill for htmx-polled regions */
.poll-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  color:#3F3F5A; background:#F8F7FB; border:1px solid #E5E7EB; padding:4px 10px; border-radius:999px; }
.poll-dot { width:7px; height:7px; border-radius:999px; background:#15803D; }
.poll-pill.is-updating .poll-dot { background:#CA8A04; animation:pollpulse 1s infinite var(--ease-std); }
@keyframes pollpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* skeleton */
.skel { background:linear-gradient(90deg,#EEF0F6 25%,#F8F7FB 37%,#EEF0F6 63%); background-size:400% 100%;
  animation:skel 1.4s ease infinite; border-radius:8px; }
@keyframes skel { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}