/*
 * BioLinkForge Theme Overrides
 * v5.40.102
 *
 * DESIGN-ONLY FILE.
 * Safe for a visual/UX designer to edit without touching PHP/business logic.
 *
 * Do not add JavaScript, PHP, API calls, database queries or permissions here.
 * Keep changes limited to CSS: colors, typography, spacing, borders, shadows,
 * radii, responsive layout, focus states and visual hierarchy.
 *
 * This file is loaded after the platform's built-in styles.
 */

:root {
  /* Main visual tokens */
  --bf-theme-primary: #7657ff;
  --bf-theme-primary-hover: #6242ed;
  --bf-theme-secondary: #eef2ff;
  --bf-theme-ink: #101828;
  --bf-theme-muted: #667085;
  --bf-theme-surface: #ffffff;
  --bf-theme-surface-soft: #f8fafc;
  --bf-theme-border: #e4e7ec;
  --bf-theme-radius: 16px;
  --bf-theme-radius-lg: 22px;
  --bf-theme-shadow: 0 12px 35px rgba(16,24,40,.08);
}

/* Safe global visual defaults */
body {
  color: var(--bf-theme-ink);
}

/* Common interactive controls */
button,
input[type="submit"],
input[type="button"],
a.button,
.btn,
.bf-btn {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover,
.btn:hover,
.bf-btn:hover {
  transform: translateY(-1px);
}

/* Keyboard accessibility: visual only */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bf-theme-primary) 35%, transparent);
  outline-offset: 2px;
}

/*
 * PAGE-SPECIFIC OVERRIDES
 *
 * Add overrides below after reviewing customization/DESIGN_HANDOFF.md.
 * Prefer the page/component class listed there instead of broad selectors.
 */

/* Example:
.bf-editor .bf-top {
  border-bottom-color: var(--bf-theme-border);
}
*/


/* v5.40.102 shared visual layer: loaded by the shared application layout and public profile/product views. */
:root {
  --bf-theme-primary: #7657ff;
  --bf-theme-primary-hover: #6242ed;
  --bf-theme-secondary: #eef2ff;
  --bf-theme-ink: #101828;
  --bf-theme-muted: #667085;
  --bf-theme-surface: #ffffff;
  --bf-theme-surface-soft: #f8fafc;
  --bf-theme-border: #e4e7ec;
  --bf-theme-radius: 12px;
  --bf-theme-radius-lg: 22px;
  --bf-theme-shadow: 0 12px 35px rgba(16,24,40,.08);
  --bf-theme-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { color: var(--bf-theme-ink); font-family: var(--bf-theme-font); }
.bf-site-nav, .bf-mobile-drawer { background: var(--bf-theme-surface) !important; border-color: var(--bf-theme-border) !important; }
.bf-card, .card, .bf-auth-card, .fm-plan, .fm-matrix, .fm-current { background: var(--bf-theme-surface) !important; border-color: var(--bf-theme-border) !important; border-radius: var(--bf-theme-radius-lg) !important; box-shadow: var(--bf-theme-shadow) !important; }
.bf-nav-item:hover, .bf-nav-item[aria-current=page] { background: var(--bf-theme-secondary) !important; color: var(--bf-theme-primary) !important; }
.btn.primary, .bf-nav-cta, .bf-btn.primary { background: var(--bf-theme-primary) !important; border-color: var(--bf-theme-primary) !important; }
.btn.primary:hover, .bf-nav-cta:hover, .bf-btn.primary:hover { background: var(--bf-theme-primary-hover) !important; border-color: var(--bf-theme-primary-hover) !important; }
.btn, .bf-btn { border-radius: var(--bf-theme-radius) !important; }
input, textarea, select { border-color: var(--bf-theme-border) !important; border-radius: var(--bf-theme-radius) !important; background: var(--bf-theme-surface) !important; color: var(--bf-theme-ink) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--bf-theme-primary) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-theme-primary) 12%, transparent) !important; }
.muted, .bf-muted { color: var(--bf-theme-muted) !important; }
.bf-status, .pill { background: var(--bf-theme-secondary) !important; }
.bf-v40 .link, .bf-v35 .link { border-color: var(--bf-theme-border) !important; }
.wrap .card { background: var(--bf-theme-surface) !important; border-color: var(--bf-theme-border) !important; }
.buy { background: var(--bf-theme-primary) !important; border-radius: var(--bf-theme-radius) !important; }
.buy:hover { background: var(--bf-theme-primary-hover) !important; }