/*
Theme Name: BasilBase
Theme URI: https://basilbase.com/
Author: BasilBase Studio
Author URI: https://basilbase.com/
Description: BasilBase is a dark, high-contrast WordPress theme built for micro-SaaS studios and app development agencies. It ships with an animated front page, service / project / team / testimonial content types, a multi-step project inquiry wizard that stores leads in the WordPress admin, and a one-click demo content importer. No page builder, no jQuery, no external CDN requests.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: basilbase
Tags: business, portfolio, technology, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, full-width-template, block-styles, wide-blocks

BasilBase is distributed under the terms of the GNU GPL v2 or later.
Normalize rules adapted from normalize.css (MIT).
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Surfaces */
	--bb-bg: #05060c;
	--bb-bg-alt: #080b16;
	--bb-surface: #0c1020;
	--bb-surface-2: #12172d;
	--bb-surface-3: #1a2144;
	--bb-glass: rgba(18, 23, 45, 0.62);
	--bb-glass-strong: rgba(9, 12, 24, 0.86);

	/* Lines */
	--bb-line: rgba(142, 160, 224, 0.14);
	--bb-line-strong: rgba(142, 160, 224, 0.3);

	/* Text */
	--bb-text: #eef1fb;
	--bb-text-soft: #c4cce6;
	--bb-muted: #8d98bb;
	--bb-dim: #626c92;

	/* Brand */
	--bb-primary: #6b5bff;
	--bb-primary-600: #5947f3;
	--bb-primary-soft: rgba(107, 91, 255, 0.15);
	--bb-cyan: #25d8ee;
	--bb-cyan-soft: rgba(37, 216, 238, 0.14);
	--bb-pink: #ff5fa2;
	--bb-lime: #9ef01a;
	--bb-amber: #ffb340;
	--bb-danger: #ff6262;

	/* Gradients */
	--bb-grad: linear-gradient(135deg, #6b5bff 0%, #25d8ee 100%);
	--bb-grad-warm: linear-gradient(135deg, #ff5fa2 0%, #6b5bff 100%);
	--bb-grad-tri: linear-gradient(120deg, #ff5fa2 0%, #6b5bff 48%, #25d8ee 100%);
	--bb-grad-fade: linear-gradient(180deg, rgba(107, 91, 255, 0.12), transparent 70%);

	/* Typography */
	--bb-font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bb-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--bb-fs-hero: clamp(2.6rem, 6.2vw, 5rem);
	--bb-fs-h1: clamp(2.2rem, 4.6vw, 3.6rem);
	--bb-fs-h2: clamp(1.85rem, 3.4vw, 2.85rem);
	--bb-fs-h3: clamp(1.35rem, 2vw, 1.7rem);
	--bb-fs-h4: clamp(1.1rem, 1.4vw, 1.28rem);
	--bb-fs-lead: clamp(1.05rem, 1.5vw, 1.28rem);
	--bb-fs-body: 1rem;
	--bb-fs-sm: 0.9125rem;
	--bb-fs-xs: 0.8125rem;
	--bb-fs-eyebrow: 0.75rem;

	/* Space */
	--bb-container: 1240px;
	--bb-container-narrow: 900px;
	--bb-gutter: clamp(1.15rem, 4vw, 2.5rem);
	--bb-section-y: clamp(4.5rem, 9vw, 8.5rem);

	/* Radii */
	--bb-r-sm: 8px;
	--bb-r: 14px;
	--bb-r-lg: 22px;
	--bb-r-xl: 32px;
	--bb-r-pill: 999px;

	/* Shadow */
	--bb-shadow-sm: 0 2px 10px rgba(2, 4, 12, 0.4);
	--bb-shadow: 0 18px 50px -18px rgba(2, 4, 12, 0.85);
	--bb-shadow-lg: 0 40px 90px -30px rgba(2, 4, 12, 0.95);
	--bb-glow: 0 0 0 1px rgba(107, 91, 255, 0.35), 0 18px 60px -20px rgba(107, 91, 255, 0.55);

	/* Motion */
	--bb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--bb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--bb-t-fast: 0.18s var(--bb-ease);
	--bb-t: 0.32s var(--bb-ease);
	--bb-t-slow: 0.6s var(--bb-ease);

	/* Chrome */
	--bb-header-h: 74px;
	--bb-z-header: 900;
	--bb-z-drawer: 950;
	--bb-z-top: 990;
}

/* ==========================================================================
   2. Reset / normalize
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bb-header-h) + 24px);
}

body {
	margin: 0;
	background-color: var(--bb-bg);
	color: var(--bb-text);
	font-family: var(--bb-font);
	font-size: var(--bb-fs-body);
	line-height: 1.68;
	font-weight: 400;
	letter-spacing: -0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

body.bb-no-scroll {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	font-weight: 650;
	line-height: 1.14;
	letter-spacing: -0.028em;
	color: var(--bb-text);
	text-wrap: balance;
}

h1 { font-size: var(--bb-fs-h1); }
h2 { font-size: var(--bb-fs-h2); }
h3 { font-size: var(--bb-fs-h3); }
h4 { font-size: var(--bb-fs-h4); }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; }

p {
	margin: 0 0 1.15em;
	color: var(--bb-text-soft);
}

p:last-child { margin-bottom: 0; }

a {
	color: var(--bb-cyan);
	text-decoration: none;
	transition: color var(--bb-t-fast), opacity var(--bb-t-fast);
}

a:hover { color: #7ef0ff; }

img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

ul, ol {
	margin: 0 0 1.15em;
	padding-left: 1.35em;
	color: var(--bb-text-soft);
}

li { margin-bottom: 0.45em; }

blockquote {
	margin: 2rem 0;
	padding: 1.4rem 1.6rem;
	border-left: 3px solid var(--bb-primary);
	background: var(--bb-surface);
	border-radius: 0 var(--bb-r) var(--bb-r) 0;
	font-size: 1.08rem;
	color: var(--bb-text);
}

blockquote cite {
	display: block;
	margin-top: 0.8rem;
	font-size: var(--bb-fs-sm);
	font-style: normal;
	color: var(--bb-muted);
}

code, kbd, pre, samp {
	font-family: var(--bb-font-mono);
	font-size: 0.88em;
}

code {
	padding: 0.15em 0.42em;
	border-radius: 6px;
	background: var(--bb-surface-2);
	border: 1px solid var(--bb-line);
	color: var(--bb-cyan);
}

pre {
	margin: 1.6rem 0;
	padding: 1.25rem 1.35rem;
	overflow-x: auto;
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-r);
	line-height: 1.6;
}

pre code {
	padding: 0;
	background: none;
	border: 0;
	color: var(--bb-text-soft);
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background: var(--bb-line);
}

table {
	width: 100%;
	margin: 1.8rem 0;
	border-collapse: collapse;
	font-size: var(--bb-fs-sm);
}

th, td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--bb-line);
	text-align: left;
}

th {
	font-weight: 620;
	color: var(--bb-text);
	background: var(--bb-surface);
}

td { color: var(--bb-text-soft); }

figure { margin: 2rem 0; }

figcaption {
	margin-top: 0.7rem;
	font-size: var(--bb-fs-xs);
	color: var(--bb-muted);
}

strong, b { font-weight: 640; color: var(--bb-text); }

small { font-size: var(--bb-fs-xs); }

::selection {
	background: rgba(107, 91, 255, 0.42);
	color: #fff;
}

/* Form base */
input, textarea, select, button {
	font: inherit;
	color: inherit;
}

button { cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--bb-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Scrollbar */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--bb-surface-3) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bb-bg-alt); }
*::-webkit-scrollbar-thumb {
	background: var(--bb-surface-3);
	border-radius: 10px;
	border: 2px solid var(--bb-bg-alt);
}
*::-webkit-scrollbar-thumb:hover { background: #26305c; }

/* ==========================================================================
   3. Accessibility helpers
   ========================================================================== */

.screen-reader-text,
.bb-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bb-skip {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 999;
	padding: 0.7rem 1.2rem;
	background: var(--bb-primary);
	color: #fff;
	border-radius: 0 0 var(--bb-r-sm) var(--bb-r-sm);
	font-size: var(--bb-fs-sm);
	font-weight: 600;
	transition: top var(--bb-t);
}

.bb-skip:focus {
	top: 0;
	color: #fff;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.bb-container {
	width: 100%;
	max-width: var(--bb-container);
	margin-inline: auto;
	padding-inline: var(--bb-gutter);
}

.bb-container--narrow { max-width: var(--bb-container-narrow); }
.bb-container--wide { max-width: 1440px; }

.bb-section {
	position: relative;
	padding-block: var(--bb-section-y);
}

.bb-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.bb-section--flush-top { padding-top: 0; }
.bb-section--flush-bottom { padding-bottom: 0; }
.bb-section--alt { background: var(--bb-bg-alt); }
.bb-section--surface { background: linear-gradient(180deg, var(--bb-bg-alt), var(--bb-bg)); }

.bb-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.bb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bb-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bb-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.bb-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.bb-split--sticky { align-items: start; }
.bb-split--lead { grid-template-columns: 1.08fr 0.92fr; }

.bb-stack > * + * { margin-top: 1.1rem; }
.bb-flex { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.bb-flex--between { justify-content: space-between; }
.bb-flex--center { justify-content: center; }
.bb-flex--end { justify-content: flex-end; }

.bb-text-center { text-align: center; }
.bb-mx-auto { margin-inline: auto; }
.bb-mt-0 { margin-top: 0; }
.bb-mt-1 { margin-top: 0.75rem; }
.bb-mt-2 { margin-top: 1.5rem; }
.bb-mt-3 { margin-top: 2.25rem; }
.bb-mt-4 { margin-top: 3rem; }
.bb-mb-0 { margin-bottom: 0; }
.bb-mb-2 { margin-bottom: 1.5rem; }
.bb-mb-3 { margin-bottom: 2.25rem; }
.bb-mb-4 { margin-bottom: 3rem; }
.bb-w-full { width: 100%; }
.bb-relative { position: relative; }

@media (max-width: 1024px) {
	.bb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-split,
	.bb-split--lead { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.bb-grid--2,
	.bb-grid--3,
	.bb-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   5. Typography utilities
   ========================================================================== */

.bb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 1.15rem;
	font-family: var(--bb-font-mono);
	font-size: var(--bb-fs-eyebrow);
	font-weight: 550;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-cyan);
}

.bb-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: linear-gradient(90deg, var(--bb-cyan), transparent);
}

.bb-eyebrow--center { justify-content: center; }
.bb-eyebrow--center::after {
	content: "";
	width: 26px;
	height: 1px;
	background: linear-gradient(270deg, var(--bb-cyan), transparent);
}

.bb-lead {
	font-size: var(--bb-fs-lead);
	line-height: 1.62;
	color: var(--bb-text-soft);
}

.bb-muted { color: var(--bb-muted); }
.bb-dim { color: var(--bb-dim); }
.bb-mono {
	font-family: var(--bb-font-mono);
	font-size: 0.86em;
	letter-spacing: 0.02em;
}

.bb-gradient-text {
	background: var(--bb-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.bb-gradient-text--warm { background-image: var(--bb-grad-tri); }

.bb-underline-scribble {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.bb-underline-scribble::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.12em;
	height: 0.32em;
	background: var(--bb-grad);
	opacity: 0.28;
	border-radius: var(--bb-r-pill);
}

.bb-section-head {
	max-width: 760px;
	margin-bottom: clamp(2.4rem, 4.5vw, 3.75rem);
}

.bb-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.bb-section-head h2 { margin-bottom: 0.85rem; }

.bb-balance { text-wrap: balance; }