/* ═══════════════════════════════════════════════════════════════════════
 design.css — Peptelligence Design System
 iOS Liquid Glass / Glassmorphism · Navy + Gold palette
 Adapted from healthy360 design system
 ═══════════════════════════════════════════════════════════════════════ */

/* ── Custom Properties ────────────────────────────────────────────────── */
:root {
 /* Brand palette */
 --gold: #D4A843;
 --gold-light: #e6c76e;
 --gold-dark: #b8912e;
 --navy: #0B1B3A;
 --navy-deep: #061224;
 --navy-mid: #122a52;
 --steel: #64748b;
 --ivory: #f8f6f1;
 --slate: #94a3b8;
 --ink: #0B1B3A;
 --paper: #f8f6f1;

 /* Semantic aliases (storefront-theme.js compat) */
 --sf-primary: var(--navy);
 --sf-accent: var(--gold);
 --sf-bg: #ffffff;
 --sf-surface: var(--ivory);
 --sf-text: #111111;
 --sf-muted: var(--steel);
 --sf-border: #eaeaea;
 --sf-header-bg: var(--navy-deep);
 --sf-header-text: #ffffff;
 --sf-banner-bg: var(--navy);
 --sf-banner-text: #ffffff;
 --sf-btn-text: #ffffff;
 --sf-success: #059669;
 --sf-danger: #dc2626;
 --sf-radius: 12px;
 --sf-font: -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

 /* Glass system */
 --glass-blur: 20px;
 --glass-saturate: 1.8;
 --glass-brightness: 1.05;
 --glass-bg: rgba(255, 255, 255, 0.55);
 --glass-bg-dark: rgba(11, 27, 58, 0.65);
 --glass-bg-heavy: rgba(255, 255, 255, 0.72);
 --glass-border: rgba(255, 255, 255, 0.35);
 --glass-border-dark: rgba(255, 255, 255, 0.12);
 --glass-specular: rgba(255, 255, 255, 0.55);
 --glass-specular-subtle: rgba(255, 255, 255, 0.25);

 /* Shadows */
 --shadow-xs: 0 1px 2px rgba(11, 27, 58, 0.06);
 --shadow-sm: 0 2px 6px rgba(11, 27, 58, 0.08);
 --shadow-md: 0 4px 16px rgba(11, 27, 58, 0.10);
 --shadow-lg: 0 8px 32px rgba(11, 27, 58, 0.12);
 --shadow-xl: 0 16px 48px rgba(11, 27, 58, 0.16);
 --shadow-glass: 0 8px 32px rgba(11, 27, 58, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.08);
 --shadow-glow: 0 0 24px rgba(212, 168, 67, 0.20);

 /* Radii */
 --r-xs: 6px;
 --r-sm: 8px;
 --r-md: 12px;
 --r-lg: 16px;
 --r-xl: 24px;
 --r-pill: 999px;
 --r-card: 18px;

 /* Motion */
 --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 --dur-fast: 120ms;
 --dur-normal: 240ms;
 --dur-slow: 420ms;

 /* Z-index */
 --z-base: 1;
 --z-card: 10;
 --z-sticky: 100;
 --z-topbar: 500;
 --z-overlay: 900;
 --z-modal: 1000;
 --z-toast: 1100;

 /* Spacing */
 --sp-xs: 4px;
 --sp-sm: 8px;
 --sp-md: 16px;
 --sp-lg: 24px;
 --sp-xl: 32px;
 --sp-2xl: 48px;
 --sp-3xl: 64px;
 --sp-4xl: 96px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 scroll-behavior: smooth;
}
body {
 margin: 0;
 padding: 0;
 font-family: var(--sf-font);
 color: var(--ink);
 background: var(--paper);
 line-height: 1.6;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
 font: inherit;
 color: inherit;
 border: none;
 background: none;
 margin: 0;
 padding: 0;
}
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
::selection { background: var(--gold); color: #fff; }

/* ── Typography ───────────────────────────────────────────────────────── */
h1 {
 font-size: clamp(2rem, 5vw, 3.25rem);
 font-weight: 700;
 letter-spacing: -0.025em;
 line-height: 1.1;
}
h2 {
 font-size: clamp(1.5rem, 3.5vw, 2.25rem);
 font-weight: 700;
 letter-spacing: -0.02em;
 line-height: 1.15;
}
h3 {
 font-size: clamp(1.125rem, 2.5vw, 1.5rem);
 font-weight: 600;
 letter-spacing: -0.015em;
 line-height: 1.25;
}
h4 {
 font-size: 1.125rem;
 font-weight: 600;
 line-height: 1.3;
}
.eyebrow {
 font-size: 0.6875rem;
 font-weight: 600;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--gold);
}
.lede {
 font-size: clamp(1.0625rem, 2vw, 1.25rem);
 line-height: 1.7;
 color: var(--steel);
 max-width: 60ch;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.container {
 width: 100%;
 max-width: 1180px;
 margin-inline: auto;
 padding-inline: var(--sp-lg);
}
.container-narrow {
 width: 100%;
 max-width: 780px;
 margin-inline: auto;
 padding-inline: var(--sp-lg);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 12px 24px;
 font-weight: 600;
 font-size: 0.9375rem;
 letter-spacing: 0.02em;
 border-radius: var(--r-pill);
 cursor: pointer;
 transition: transform var(--dur-fast) var(--ease-out),
 box-shadow var(--dur-normal) var(--ease-out),
 opacity var(--dur-fast);
 white-space: nowrap;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}

/* Primary — solid gold */
.btn.primary {
 background: var(--gold);
 color: var(--navy-deep);
 box-shadow: var(--shadow-sm), 0 0 0 1px rgba(212, 168, 67, 0.2);
}
.btn.primary:hover {
 box-shadow: var(--shadow-md), var(--shadow-glow);
}

/* Ghost — outlined */
.btn.ghost {
 background: transparent;
 border: 1.5px solid var(--glass-border);
 color: #fff;
 backdrop-filter: blur(8px) saturate(1.4);
 -webkit-backdrop-filter: blur(8px) saturate(1.4);
}
.btn.ghost:hover {
 background: rgba(255, 255, 255, 0.1);
 border-color: rgba(255, 255, 255, 0.5);
}

/* Gold glass — frosted gold pill */
.btn.gold {
 background: rgba(212, 168, 67, 0.18);
 backdrop-filter: blur(12px) saturate(1.6);
 -webkit-backdrop-filter: blur(12px) saturate(1.6);
 color: var(--gold-light);
 border: 1px solid rgba(212, 168, 67, 0.3);
}
.btn.gold:hover {
 background: rgba(212, 168, 67, 0.28);
 border-color: rgba(212, 168, 67, 0.5);
 box-shadow: var(--shadow-glow);
}

/* Sizes */
.btn.sm { padding: 8px 16px; font-size: 0.8125rem; }
.btn.lg { padding: 16px 32px; font-size: 1rem; }

/* ── Cards (iOS Liquid Glass) ─────────────────────────────────────────── */
.card {
 position: relative;
 background:
 linear-gradient(
 135deg,
 rgba(255, 255, 255, 0.60) 0%,
 rgba(255, 255, 255, 0.30) 50%,
 rgba(248, 246, 241, 0.40) 100%
 );
 backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
 border-radius: var(--r-card);
 border: 1px solid var(--glass-border);
 border-top: 1px solid var(--glass-specular);
 box-shadow: var(--shadow-glass);
 overflow: hidden;
 transition: transform var(--dur-normal) var(--ease-out),
 box-shadow var(--dur-normal) var(--ease-out);
}
.card:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Dark variant */
.card.dark {
 background:
 linear-gradient(
 135deg,
 rgba(11, 27, 58, 0.70) 0%,
 rgba(6, 18, 36, 0.80) 100%
 );
 border-color: var(--glass-border-dark);
 border-top-color: rgba(255, 255, 255, 0.15);
 color: #fff;
}

/* ── Pills ────────────────────────────────────────────────────────────── */
.pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 4px 12px;
 font-size: 0.75rem;
 font-weight: 600;
 letter-spacing: 0.04em;
 border-radius: var(--r-pill);
 background: rgba(212, 168, 67, 0.12);
 color: var(--gold);
 border: 1px solid rgba(212, 168, 67, 0.2);
}
.pill.success {
 background: rgba(5, 150, 105, 0.10);
 color: var(--sf-success);
 border-color: rgba(5, 150, 105, 0.2);
}
.pill.danger {
 background: rgba(220, 38, 38, 0.10);
 color: var(--sf-danger);
 border-color: rgba(220, 38, 38, 0.2);
}
.pill.muted {
 background: rgba(100, 116, 139, 0.10);
 color: var(--steel);
 border-color: rgba(100, 116, 139, 0.2);
}

/* ── Inputs (glass) ───────────────────────────────────────────────────── */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
 width: 100%;
 padding: 12px 16px;
 font-size: 0.9375rem;
 border-radius: var(--r-md);
 background: rgba(255, 255, 255, 0.65);
 backdrop-filter: blur(10px) saturate(1.4);
 -webkit-backdrop-filter: blur(10px) saturate(1.4);
 border: 1px solid rgba(11, 27, 58, 0.12);
 color: var(--ink);
 transition: border-color var(--dur-fast),
 box-shadow var(--dur-fast);
}
.input:focus,
input:focus,
textarea:focus,
select:focus {
 outline: none;
 border-color: var(--gold);
 box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}
.input::placeholder,
input::placeholder,
textarea::placeholder {
 color: var(--slate);
}

/* Dark context inputs */
.dark .input,
.dark input,
.dark textarea,
.dark select {
 background: rgba(255, 255, 255, 0.08);
 border-color: rgba(255, 255, 255, 0.15);
 color: #fff;
}
.dark .input::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
 color: rgba(255, 255, 255, 0.4);
}

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast {
 position: fixed;
 bottom: var(--sp-lg);
 left: 50%;
 transform: translateX(-50%) translateY(120%);
 padding: 12px 24px;
 border-radius: var(--r-pill);
 font-size: 0.875rem;
 font-weight: 600;
 color: #fff;
 background: var(--navy);
 backdrop-filter: blur(16px) saturate(1.6);
 -webkit-backdrop-filter: blur(16px) saturate(1.6);
 box-shadow: var(--shadow-lg);
 z-index: var(--z-toast);
 opacity: 0;
 pointer-events: none;
 transition: transform var(--dur-slow) var(--ease-spring),
 opacity var(--dur-normal);
}
.toast.visible {
 transform: translateX(-50%) translateY(0);
 opacity: 1;
 pointer-events: auto;
}
.toast.success { background: var(--sf-success); }
.toast.error { background: var(--sf-danger); }

/* ── Disclaimer ───────────────────────────────────────────────────────── */
.disclaimer {
 font-size: 0.6875rem;
 line-height: 1.6;
 color: var(--slate);
 padding: var(--sp-sm) var(--sp-md);
 border-radius: var(--r-sm);
 background: rgba(100, 116, 139, 0.06);
 border: 1px solid rgba(100, 116, 139, 0.1);
}

/* ── Skeleton Loading ─────────────────────────────────────────────────── */
.skeleton {
 position: relative;
 overflow: hidden;
 background: rgba(11, 27, 58, 0.06);
 border-radius: var(--r-sm);
}
.skeleton::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(
 90deg,
 transparent 0%,
 rgba(255, 255, 255, 0.5) 50%,
 transparent 100%
 );
 animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
 0% { transform: translateX(-100%); }
 100% { transform: translateX(100%); }
}

/* Dark skeleton */
.dark .skeleton,
.skeleton.dark {
 background: rgba(255, 255, 255, 0.08);
}
.dark .skeleton::after,
.skeleton.dark::after {
 background: linear-gradient(
 90deg,
 transparent 0%,
 rgba(255, 255, 255, 0.06) 50%,
 transparent 100%
 );
}

/* ── Reduced Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
 .skeleton::after { animation: none; }
}

/* ── Utilities ────────────────────────────────────────────────────────── */
.sr-only {
 position: absolute;
 width: 1px; height: 1px;
 padding: 0; margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-muted { color: var(--steel); }
.text-navy { color: var(--navy); }
.glass-surface {
 background: var(--glass-bg);
 backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
}

/* Peptelligence header logo */
.site-logo {
  display: block;
  max-height: 52px;
  width: auto;
}

.navbar-brand .site-logo,
.brand .site-logo {
  max-width: 220px;
}