/**
 * Sideconvo Base Styles
 *
 * Global typography, resets, and foundational styles.
 * Applied to all components within the Sideconvo plugin.
 */

/* ========================================
   FONT IMPORTS
   ======================================== */

/* Inter - Primary font family (matching reference plugin) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========================================
   BASE RESETS
   ======================================== */

/* Scope all resets to our plugin container */
#sideconvo-app *,
#sideconvo-app *::before,
#sideconvo-app *::after {
	box-sizing: border-box;
}

#sideconvo-app {
	/* Set base font */
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Remove default margins from typography elements */
#sideconvo-app h1,
#sideconvo-app h2,
#sideconvo-app h3,
#sideconvo-app h4,
#sideconvo-app h5,
#sideconvo-app h6,
#sideconvo-app p,
#sideconvo-app ul,
#sideconvo-app ol {
	margin: 0;
}

#sideconvo-app ul,
#sideconvo-app ol {
	list-style: none;
}

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */

/* Display Text - Large, serif, for splash screens and hero sections */
#sideconvo-app .text-display-xl {
	font-family: var(--font-display);
	font-size: var(--text-6xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	font-feature-settings: 'ss01' on, 'ss02' on;
}

#sideconvo-app .text-display-lg {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

#sideconvo-app .text-display-md {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
}

/* Headings - Geometric sans for structure */
#sideconvo-app .text-heading-xl {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

#sideconvo-app .text-heading-lg {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
}

#sideconvo-app .text-heading-md {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
}

#sideconvo-app .text-heading-sm {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-normal);
}

/* Body Text */
#sideconvo-app .text-body-lg {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--weight-normal);
	line-height: var(--leading-relaxed);
}

#sideconvo-app .text-body-base {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-normal);
	line-height: var(--leading-normal);
}

#sideconvo-app .text-body-sm {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-normal);
	line-height: var(--leading-normal);
}

#sideconvo-app .text-body-xs {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-normal);
	line-height: var(--leading-normal);
}

/* Labels and UI Text */
#sideconvo-app .text-label-lg {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
}

#sideconvo-app .text-label-base {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
}

#sideconvo-app .text-label-sm {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* Monospace for code/API keys */
#sideconvo-app .text-mono {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/* ========================================
   SEMANTIC COLORS
   ======================================== */

#sideconvo-app .text-primary {
	color: var(--color-text-primary);
}

#sideconvo-app .text-secondary {
	color: var(--color-text-secondary);
}

#sideconvo-app .text-tertiary {
	color: var(--color-text-tertiary);
}

#sideconvo-app .text-inverse {
	color: var(--color-text-inverse);
}

#sideconvo-app .text-brand {
	color: var(--color-primary);
}

#sideconvo-app .text-success {
	color: var(--color-success);
}

#sideconvo-app .text-warning {
	color: var(--color-warning);
}

#sideconvo-app .text-error {
	color: var(--color-error);
}

/* ========================================
   FOCUS STYLES - FIXED (No Cropping)
   ======================================== */

/* Remove default outline, use box-shadow instead for proper rendering */
#sideconvo-app *:focus {
	outline: none;
}

#sideconvo-app *:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(95, 91, 243, 0.4);
	border-radius: var(--radius-sm);
}

#sideconvo-app button:focus-visible,
#sideconvo-app a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(95, 91, 243, 0.4);
}

/* Inputs get a tighter focus ring */
#sideconvo-app :where(input):focus-visible,
#sideconvo-app :where(textarea):focus-visible,
#sideconvo-app :where(select):focus-visible {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(95, 91, 243, 0.15);
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

#sideconvo-app ::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

#sideconvo-app ::-webkit-scrollbar-track {
	background: var(--color-gray-100);
	border-radius: var(--radius-full);
}

#sideconvo-app ::-webkit-scrollbar-thumb {
	background: var(--color-gray-300);
	border-radius: var(--radius-full);
	border: 3px solid var(--color-gray-100);
	transition: background var(--duration-fast) var(--ease-out-quad);
}

#sideconvo-app ::-webkit-scrollbar-thumb:hover {
	background: var(--color-gray-400);
}

/* Firefox scrollbar */
#sideconvo-app * {
	scrollbar-width: thin;
	scrollbar-color: var(--color-gray-300) var(--color-gray-100);
}

/* ========================================
   SELECTION COLORS
   ======================================== */

#sideconvo-app ::selection {
	background: var(--color-primary-lighter);
	color: var(--color-navy-deep);
}

#sideconvo-app ::-moz-selection {
	background: var(--color-primary-lighter);
	color: var(--color-navy-deep);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Elevation utilities */
#sideconvo-app .elevation-0 {
	box-shadow: none;
}

#sideconvo-app .elevation-1 {
	box-shadow: var(--shadow-sm);
}

#sideconvo-app .elevation-2 {
	box-shadow: var(--shadow-base);
}

#sideconvo-app .elevation-3 {
	box-shadow: var(--shadow-md);
}

#sideconvo-app .elevation-4 {
	box-shadow: var(--shadow-lg);
}

#sideconvo-app .elevation-5 {
	box-shadow: var(--shadow-xl);
}

/* Transition utilities */
#sideconvo-app .transition-fast {
	transition: all var(--duration-fast) var(--ease-out-quad);
}

#sideconvo-app .transition-base {
	transition: all var(--duration-base) var(--ease-out-expo);
}

#sideconvo-app .transition-slow {
	transition: all var(--duration-slow) var(--ease-out-expo);
}

/* Glass morphism effect */
#sideconvo-app .glass {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(var(--blur-lg));
	-webkit-backdrop-filter: blur(var(--blur-lg));
	border: 1px solid rgba(255, 255, 255, 0.3);
}

#sideconvo-app .glass-dark {
	background: rgba(15, 22, 41, 0.7);
	backdrop-filter: blur(var(--blur-lg));
	-webkit-backdrop-filter: blur(var(--blur-lg));
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* Hide/show at breakpoints */
@media (max-width: 768px) {
	#sideconvo-app .hide-mobile {
		display: none !important;
	}
}

@media (min-width: 769px) {
	#sideconvo-app .show-mobile {
		display: none !important;
	}
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

#sideconvo-app .spin {
	animation: spin 0.8s linear infinite;
	display: block;
}