/* =========================================
   Bipolarist Lab — Theme Tokens (colors4.css)
   - White → sky-blue viewport gradient
   - Indigo gradient for buttons & accents
   - Soft light-grey metadata chips
========================================= */

/* Core palette tokens */
:root {
  /* Base text & neutrals */
  --ink:            #111827;
  --muted:          #4b5563;
  --border-subtle:  #e5e7eb;
  --border-strong:  #d1d5db;

  /* Viewport background (white → sky blue) */
  --page-bg-start:  #ffffff;
  --page-bg-end:    #e0ecff;   /* soft sky blue, not saturated */

  /* Card / shell surfaces */
  --shell-bg:       #ffffff;
  --shell-border:   #e5e7eb;
  --shell-shadow:   0 18px 40px rgba(15, 23, 42, 0.08);

  /* Indigo accent (use instead of any blue) */
  --indigo-1:       #312e81;   /* deep base */
  --indigo-2:       #4f46e5;   /* bright accent */
  --indigo-grad:    linear-gradient(135deg, #312e81, #4f46e5);

  /* Metadata chips (faint light grey) */
  --chip-bg:        #f3f4f6;
  --chip-border:    #e5e7eb;
  --chip-text:      #4b5563;

  /* Progress bar */
  --progress-track: #e5e7eb;
}

/* Viewport background */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--ink);
  background: radial-gradient(circle at top, var(--page-bg-start), var(--page-bg-end) 72%);
  background-attachment: fixed;
  background-size: 200% 200%;
}

/* General card surfaces (Time & Lab pages) */
.card,
.section-card,
figure.block,
.hero-shell,
.reading-inner {
  background: var(--shell-bg);
  border: 1px solid var(--shell-border);
  box-shadow: var(--shell-shadow);
}

/* Global progress bar (top) */
#progressBar {
  background-image: var(--indigo-grad);
}

/* Generic “chip” / meta-badge styles for time pages & hero pills */
.meta-chip,
.hero-kicker,
.hero-shell span.inline-flex.rounded-full,
.hero-neon span.inline-flex.rounded-full {
  background: var(--chip-bg) !important;
  border: 1px solid var(--chip-border) !important;
  color: var(--chip-text) !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: 999px;
  font-size: 0.75rem !important;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Basic pill/tag, used by recipes & filters */
.pill,
.tag,
.tag-pill {
  border-radius: 999px;
  border: 1px solid var(--chip-border);
  background: #f9fafb;
  color: var(--chip-text);
}

/* Primary CTA buttons — solid indigo gradient */
.btn-primary,
.hero-neon a.rounded-2xl,
#submit button.rounded-2xl,
#offer button.rounded-2xl,
#newsletter button.rounded-2xl {
  background-image: var(--indigo-grad) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
}

/* Outline / secondary buttons — white fill with indigo border/text */
.btn-outline,
a.rounded-2xl.border,
button.rounded-2xl.border,
a.border-indigo-outline,
button.border-indigo-outline {
  background: #ffffff !important;
  border-radius: 1rem;
  border: 1px solid #4f46e5 !important;
  color: #312e81 !important;
}

/* Button hover states: brighten / lift */
.btn-primary:hover,
.hero-neon a.rounded-2xl:hover,
#submit button.rounded-2xl:hover,
#offer button.rounded-2xl:hover,
#newsletter button.rounded-2xl:hover {
  filter: brightness(1.07);
  box-shadow: 0 16px 30px rgba(49, 46, 129, 0.45);
}

.btn-outline:hover,
a.rounded-2xl.border:hover,
button.rounded-2xl.border:hover,
a.border-indigo-outline:hover,
button.border-indigo-outline:hover {
  background: #f9fafb !important;
  border-color: #4338ca !important;
}

.to-white {
--tw-gradient-to: none !important;
}
.via-white {
--tw-gradient-to:  none !important;
--tw-gradient-stops:  none !important;