/* ============================================
   BASALT BIO — BASE.CSS
   Design tokens, typography, resets, layout
   Palette: cool near-black · forest green · deep navy
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Surfaces (deep navy / obsidian) ---- */
  --bb-bg:         #040814;
  --bb-surface-1:  #0a1224;
  --bb-surface-2:  #0f1c33;
  --bb-surface-3:  #142847;

  /* ---- Borders ---- */
  --bb-border:     #132038;
  --bb-border-hot: #1e3a5f;

  /* ---- Forest (primary accent) ---- */
  --bb-forest:       #1a5f3f;
  --bb-forest-hot:   #2d8559;
  --bb-forest-deep:  #0f3d27;
  --bb-forest-dim:   #154a32;
  --bb-forest-glow:  rgba(45, 133, 89, 0.12);
  --bb-forest-glow-strong: rgba(45, 133, 89, 0.22);

  /* ---- Navy (secondary accent) ---- */
  --bb-navy:       #0f1c33;
  --bb-navy-hot:   #1e3a5f;
  --bb-navy-deep:  #0a1324;
  --bb-navy-glow:  rgba(30, 58, 95, 0.14);

  /* ---- Text ---- */
  --bb-text:       #f5f3ef;
  --bb-text-dim:   #c5cac4;
  --bb-text-muted: #8a918c;
  --bb-text-faint: #555b57;

  /* ---- Semantic ---- */
  --bb-error:   #b55454;
  --bb-success: var(--bb-forest-hot);

  /* ---- Category colors (reworked for cool palette) ---- */
  --bb-cat-forge: #c96b52;  /* warm rust for recovery */
  --bb-cat-axis:  #4f6fa8;  /* navy-blue for GH-axis */
  --bb-cat-epoch: #3d8a52;  /* forest for longevity */
  --bb-cat-glow:  #b07865;  /* muted copper for skin (replaces gold to kill the yellow read) */
  --bb-cat-pulse: #8a5285;  /* muted plum for vitality */
  --bb-cat-form:  #9a6080;  /* muted rose */
  --bb-cat-edge:  #3a6a9a;  /* steel blue */

  /* ---- Typography ---- */
  --bb-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bb-font-mono: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;

  /* ---- Font sizes (fluid) ---- */
  --bb-fs-xs:   0.75rem;
  --bb-fs-sm:   0.875rem;
  --bb-fs-base: 1rem;
  --bb-fs-md:   1.125rem;
  --bb-fs-lg:   1.375rem;
  --bb-fs-xl:   1.75rem;
  --bb-fs-2xl:  2.25rem;
  --bb-fs-3xl:  3rem;
  --bb-fs-4xl:  clamp(2.5rem, 7vw, 5rem);

  /* ---- Spacing ---- */
  --bb-sp-1: 4px;
  --bb-sp-2: 8px;
  --bb-sp-3: 12px;
  --bb-sp-4: 16px;
  --bb-sp-5: 24px;
  --bb-sp-6: 32px;
  --bb-sp-7: 48px;
  --bb-sp-8: 64px;
  --bb-sp-9: 96px;

  /* ---- Layout ---- */
  --bb-max-w: 1280px;
  --bb-nav-h: 68px;
  --bb-banner-h: 36px;

  /* ---- Motion ---- */
  --bb-dur-fast:  150ms;
  --bb-dur:       300ms;
  --bb-dur-slow:  600ms;
  --bb-ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --bb-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: var(--bb-fs-base);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; color: inherit; }

::selection { background: var(--bb-forest); color: var(--bb-text); }

/* ---- Typography utilities ---- */
.eyebrow {
  font-size: var(--bb-fs-xs);
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--bb-forest-hot);
  font-weight: 600;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, var(--bb-fs-3xl));
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--bb-text);
  text-transform: lowercase;
}

.label-caps {
  font-size: var(--bb-fs-xs);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--bb-text-muted);
  font-weight: 600;
}

.mono-tag {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-xs);
  letter-spacing: 0.04em;
  color: var(--bb-text-muted);
}

.amber-dot, .forest-dot { color: var(--bb-forest-hot); }
.amber { color: var(--bb-forest-hot); }
.dim { color: var(--bb-text-muted); }

/* ---- Containers ---- */
.container {
  max-width: var(--bb-max-w);
  margin: 0 auto;
  padding: 0 var(--bb-sp-5);
  width: 100%;
}

@media (min-width: 768px) {
  .container { padding: 0 var(--bb-sp-6); }
}

.section {
  padding: var(--bb-sp-8) 0;
  position: relative;
}

@media (min-width: 768px) {
  .section { padding: var(--bb-sp-9) 0; }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--bb-sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--bb-sp-6);
}

.section-header > div:first-child { max-width: 640px; }
.section-header .eyebrow { margin-bottom: var(--bb-sp-3); display: block; }

/* ---- Scrollbar (dark theme) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bb-bg); }
::-webkit-scrollbar-thumb { background: var(--bb-surface-2); border: 2px solid var(--bb-bg); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--bb-surface-3); }

/* ============================================
   GLOBAL LOWERCASE ENFORCEMENT
   Every heading, product name, nav link, and label
   renders lowercase regardless of data casing.
   ============================================ */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero__title-1,
.hero__title-2,
.hero__eyebrow,
.page-hero__title,
.page-hero__eyebrow,
.content-hero__title,
.content-hero__eyebrow,
.post-header__title,
.post-header__badge,
.nav__link,
.nav__mobile-link,
.nav__logo-text,
.footer__logo-text,
.footer__col-title,
.footer__link,
.footer__legal,
.age-gate__logo-text,
.age-gate__title,
.age-gate__footer,
.eyebrow,
.label-caps,
.badge,
.badge-cat,
.badge-ghost,
.research-banner__text,
.compound-card__name,
.compound-card__scientific,
.compound-card__cta,
.compound-card__size,
.product-info__name,
.product-info__eyebrow,
.stack-card__name,
.stack-card__tagline,
.stack-card__components,
.article-card__tag,
.article-card__title,
.blog-featured__badge,
.blog-featured__title,
.blog-cat-nav a,
.bedrock__title,
.bedrock__eyebrow,
.bedrock__tier-name,
.bedrock__subtitle,
.standard__title,
.about-split__kicker,
.about-split__title,
.value__title,
.summary__title,
.summary__bedrock,
.cart-item__name,
.cart-item__sci,
.cart-empty__title,
.cart-empty__body,
.auth-card h1,
.auth-card h2,
.auth-tab,
.account-tab,
.account-panel h2,
.account-panel h3,
.checkout-step h2,
.checkout-step h3,
.shop-count,
.shop-filter,
.post-visual__watermark,
.about-split__watermark,
.blog-featured__watermark,
.post-header__meta,
.content-hero__meta {
  text-transform: lowercase !important;
}

/* Keep true initialisms readable where they matter */
abbr, .keep-case, .bb-keep-case, .breadcrumb .current, .prose,
.prose h1, .prose h2, .prose h3, .prose p, .prose li, .prose strong, .prose em,
code, kbd, .mono-tag,
input, textarea, select, ::placeholder {
  text-transform: none !important;
}

/* ============================================
   CSS VIALS — 3D product rendering
   Black label, lowercase "basalt bio" wordmark,
   product nickname, red/orange rubber cap.
   ============================================ */
.vial-showcase {
  width: 140px;
  height: 240px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(
    90deg,
    #111 0%, #222 18%, #0a0908 48%, #222 82%, #111 100%
  );
  border-radius: 14px 14px 6px 6px;
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.04),
    inset 0 -20px 30px rgba(0, 0, 0, 0.5),
    10px 20px 40px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(45, 133, 89, 0.08);
}

.vial-showcase::after {
  /* Liquid meniscus at top of vial */
  content: '';
  position: absolute;
  top: 6px;
  left: 8%;
  right: 8%;
  height: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 100%);
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.vial-cap {
  position: absolute;
  top: -22px;
  left: 14px;
  right: 14px;
  height: 28px;
  background: linear-gradient(
    90deg,
    #b5503e 0%, #d06a55 25%, #ff8a75 50%, #d06a55 75%, #b5503e 100%
  );
  border-radius: 5px 5px 0 0;
  box-shadow:
    0 -2px 4px rgba(0, 0, 0, 0.3) inset,
    0 4px 10px rgba(0, 0, 0, 0.5);
}

.vial-cap::before {
  /* Aluminum crimp ring under the rubber cap */
  content: '';
  position: absolute;
  bottom: -8px;
  left: -4px;
  right: -4px;
  height: 10px;
  background: linear-gradient(180deg, #888 0%, #444 50%, #222 100%);
  border-radius: 1px;
}

.vial-label {
  position: absolute;
  top: 42px;
  bottom: 22px;
  left: -2px;
  right: -2px;
  background: #050505;
  border-radius: 2px;
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.9),
    inset 0 0 30px rgba(0, 0, 0, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.vial-label::before {
  /* Thin forest-green accent stripe at top of label */
  content: '';
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--bb-forest-hot);
  opacity: 0.6;
}

.vial-label::after {
  /* Thin forest-green accent stripe at bottom of label */
  content: '';
  position: absolute;
  bottom: 14px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--bb-forest-hot);
  opacity: 0.6;
}

.vial-label__logo {
  font-family: var(--bb-font-body);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 14px;
  text-transform: lowercase;
}

.vial-label__name {
  font-family: var(--bb-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: lowercase;
  line-height: 1.2;
  max-width: 100px;
  word-break: break-word;
}

.vial-label__ruo {
  margin-top: 10px;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: lowercase;
}

/* Larger vial for the product detail page */
.vial-showcase--xl {
  width: 220px;
  height: 380px;
  border-radius: 18px 18px 8px 8px;
}
.vial-showcase--xl .vial-cap {
  top: -28px;
  left: 22px;
  right: 22px;
  height: 40px;
  border-radius: 7px 7px 0 0;
}
.vial-showcase--xl .vial-label {
  top: 60px;
  bottom: 32px;
  padding: 28px 16px;
}
.vial-showcase--xl .vial-label__logo {
  font-size: 18px;
  margin-bottom: 22px;
}
.vial-showcase--xl .vial-label__name {
  font-size: 24px;
  letter-spacing: 0.03em;
  max-width: 160px;
}
.vial-showcase--xl .vial-label__ruo {
  margin-top: 16px;
  font-size: 10px;
}