/* WiBiz Reports - design system v1.0 (2026-06-27)
   One source of truth for the look of reports.wibiz.ai. Brand-aligned:
   Electric Blue -> Violet -> Lavender gradient, Deep Navy, Space Grotesk + Inter.
   Loaded sitewide by nav.js (which also injects the fonts + favicon), and usable
   directly by the generated report templates. Light + dark both intentional. */

:root {
  /* Brand palette (guidelines v1.0) */
  --wb-blue: #2563FF;
  --wb-violet: #7C3AED;
  --wb-lavender: #C084FC;
  --wb-navy: #080F16;
  --wb-grad: linear-gradient(90deg, #2563FF 0%, #7C3AED 55%, #C084FC 100%);

  /* Light theme surfaces + text */
  --wb-bg: #F6F7FB;
  --wb-surface: #FFFFFF;
  --wb-surface-2: #FBFCFE;
  --wb-border: #E6E9F0;
  --wb-heading: #0B1320;
  --wb-text: #283244;
  --wb-muted: #5A6478;          /* >= 4.5:1 on white and on --wb-bg */
  --wb-faint: #8A94A8;          /* decorative only, never body text */
  --wb-accent: var(--wb-blue);
  --wb-accent-weak: #EDF1FF;

  /* Type */
  --wb-font-head: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Scale, rhythm, depth, motion */
  --wb-r-sm: 8px; --wb-r: 12px; --wb-r-lg: 18px;
  --wb-shadow: 0 1px 2px rgba(11,19,32,.04), 0 4px 16px rgba(11,19,32,.06);
  --wb-shadow-lg: 0 2px 6px rgba(11,19,32,.06), 0 18px 40px rgba(11,19,32,.10);
  --wb-ease: cubic-bezier(.16,1,.3,1);
  --wb-dur: 200ms;
}

[data-theme="dark"] {
  --wb-bg: #080F16;
  --wb-surface: #121A24;
  --wb-surface-2: #0F1620;
  --wb-border: #243042;
  --wb-heading: #EAF0F8;
  --wb-text: #C4CDDC;
  --wb-muted: #93A0B5;          /* lifted for contrast on navy */
  --wb-faint: #6B768B;
  --wb-accent: #6E8BFF;
  --wb-accent-weak: #16213A;
}

/* ---- base ---- */
.wb, .wb * { box-sizing: border-box; }
.wb body, body.wb {
  margin: 0;
  background: var(--wb-bg);
  color: var(--wb-text);
  font-family: var(--wb-font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--wb-dur), color var(--wb-dur);
}
.wb h1, .wb h2, .wb h3, .wb h4 { font-family: var(--wb-font-head); color: var(--wb-heading); letter-spacing: -.01em; line-height: 1.15; margin: 0; }
.wb a { color: var(--wb-accent); text-decoration: none; }

/* ---- shared primitives the templates/pages can use ---- */
.wb-eyebrow { font-family: var(--wb-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wb-muted); }
.wb-card {
  background: var(--wb-surface); border: 1px solid var(--wb-border); border-radius: var(--wb-r);
  box-shadow: var(--wb-shadow); transition: transform var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.wb-card:hover { transform: translateY(-2px); box-shadow: var(--wb-shadow-lg); }
.wb-gradient-text { background: var(--wb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wb-grad-rule { height: 3px; border: 0; border-radius: 3px; background: var(--wb-grad); }

.wb-btn {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--wb-font-head);
  font-weight: 600; font-size: .9rem; padding: .6rem 1.15rem; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; transition: transform var(--wb-dur) var(--wb-ease), background var(--wb-dur), box-shadow var(--wb-dur);
}
/* Two classes so these beat the base `.wb a` color rule on anchor buttons. */
.wb-btn.wb-btn-primary { background: var(--wb-blue); color: #fff; }
.wb-btn.wb-btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37,99,255,.32); }
.wb-btn.wb-btn-ghost { background: transparent; color: var(--wb-text); border-color: var(--wb-border); }
.wb-btn.wb-btn-ghost:hover { border-color: var(--wb-accent); color: var(--wb-accent); }

/* ---- accessible focus, sitewide ---- */
.wb a:focus-visible, .wb button:focus-visible, .wb input:focus-visible,
#wbz-nav a:focus-visible, #wbz-nav button:focus-visible {
  outline: 2px solid var(--wb-accent); outline-offset: 2px; border-radius: 6px;
}

/* ---- the shared nav (rendered by nav.js) ---- */
#wbz-nav {
  position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: .75rem;
  height: 58px; padding: 0 1.25rem; background: #0B1320; border-bottom: 1px solid #1c2738;
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 6px 20px rgba(0,0,0,.28); flex-wrap: nowrap;
}
#wbz-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--wb-grad); opacity: .9; }
#wbz-nav .brand { display: flex; align-items: center; flex-shrink: 0; margin-right: .5rem; }
#wbz-nav .brand img { height: 26px; width: auto; display: block; }
/* Day pills absorb any overflow by scrolling INSIDE their own track, so the logo
   (left) and the nav links (right) are always pinned and reachable - never clipped. */
#wbz-nav .day-pills { display: flex; gap: 5px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
#wbz-nav .day-pills::-webkit-scrollbar { display: none; }
#wbz-nav .day-pill {
  font-family: var(--wb-font-head); display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; text-decoration: none; color: #97a3ba;
  border: 1px solid rgba(255,255,255,.12); transition: all var(--wb-dur) var(--wb-ease); white-space: nowrap;
}
#wbz-nav .day-pill:hover { border-color: #6E8BFF; color: #c7d2fe; }
#wbz-nav .day-pill.active { background: var(--wb-blue); border-color: var(--wb-blue); color: #fff; box-shadow: 0 4px 14px rgba(37,99,255,.4); }
#wbz-nav .day-pill.today:not(.active) { border-color: rgba(110,139,255,.45); color: #aebeff; }
#wbz-nav .day-pill.unavailable { opacity: .3; pointer-events: none; }
#wbz-nav .nav-links { display: flex; gap: 1.1rem; margin-left: auto; flex-shrink: 0; align-items: center; }
#wbz-nav .nav-links a {
  font-family: var(--wb-font-head); color: #97a3ba; text-decoration: none; font-size: .82rem; font-weight: 600;
  white-space: nowrap; transition: color var(--wb-dur); position: relative;
}
#wbz-nav .nav-links a:hover { color: #fff; }
#wbz-nav .nav-links a.nav-oracle { color: #c4b5fd; }      /* on-brand lavender, not gold */
#wbz-nav .nav-links a.nav-oracle:hover { color: #ddd6fe; }
#wbz-nav .nav-links a.nav-archive { color: #93c5fd; }
#wbz-nav .nav-links a.nav-archive:hover { color: #bfdbfe; }
#wbz-dark-toggle {
  background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #97a3ba;
  cursor: pointer; font-size: .85rem; padding: 4px 9px; line-height: 1.3; transition: all var(--wb-dur);
}
#wbz-dark-toggle:hover { border-color: #6E8BFF; color: #c7d2fe; }
@media (max-width: 860px) {
  /* day pills are a power-user shortcut; drop them on narrow screens so the
     core nav (logo + links + toggle) always fits without lateral scrolling. */
  #wbz-nav .day-pills { display: none; }
}
@media (max-width: 680px) {
  #wbz-nav { gap: .45rem; padding: 0 .85rem; }
  #wbz-nav .brand img { height: 22px; }
  #wbz-nav .nav-links { gap: .9rem; }
  #wbz-nav .nav-links a { font-size: .8rem; }
}