/**
 * Smart Resume Builder — Shared CSS
 *
 * Design tokens and primitive classes shared across the builder UI
 * and all resume templates. Loaded once, never duplicated.
 *
 * @package SmartResumeBuilder
 * @since   1.0.0
 */

/* =========================================================================
   Custom Properties (Design Tokens)
   ========================================================================= */
:root {
	/* Brand */
	--srb-blue-50:   #eff6ff;
	--srb-blue-100:  #dbeafe;
	--srb-blue-500:  #3b82f6;
	--srb-blue-600:  #2563eb;
	--srb-blue-700:  #1d4ed8;

	/* Neutrals */
	--srb-gray-50:   #f8fafc;
	--srb-gray-100:  #f1f5f9;
	--srb-gray-200:  #e2e8f0;
	--srb-gray-300:  #cbd5e1;
	--srb-gray-400:  #94a3b8;
	--srb-gray-500:  #64748b;
	--srb-gray-600:  #475569;
	--srb-gray-700:  #334155;
	--srb-gray-800:  #1e293b;
	--srb-gray-900:  #0f172a;

	/* Semantic */
	--srb-text-primary:   var(--srb-gray-800);
	--srb-text-secondary: var(--srb-gray-500);
	--srb-text-muted:     var(--srb-gray-400);
	--srb-border:         var(--srb-gray-200);
	--srb-bg:             var(--srb-gray-50);
	--srb-surface:        #ffffff;

	/* Feedback */
	--srb-success: #16a34a;
	--srb-error:   #dc2626;
	--srb-warning: #d97706;

	/* Typography */
	--srb-font-ui:   'Lato', system-ui, -apple-system, sans-serif;
	--srb-font-resume: 'Lato', 'Georgia', serif;

	/* Spacing scale */
	--srb-space-1: 4px;
	--srb-space-2: 8px;
	--srb-space-3: 12px;
	--srb-space-4: 16px;
	--srb-space-5: 20px;
	--srb-space-6: 24px;
	--srb-space-8: 32px;

	/* Radii */
	--srb-radius-sm: 4px;
	--srb-radius:    8px;
	--srb-radius-lg: 12px;
	--srb-radius-xl: 16px;

	/* Shadows */
	--srb-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / .05);
	--srb-shadow:     0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
	--srb-shadow-md:  0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
	--srb-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

	/* Transitions */
	--srb-t-fast:   120ms ease;
	--srb-t-normal: 200ms ease;
	--srb-t-slow:   350ms ease;
}

/* =========================================================================
   Resets (scoped to plugin wrapper)
   ========================================================================= */
.srb-builder-wrapper *,
.srb-builder-wrapper *::before,
.srb-builder-wrapper *::after {
	box-sizing: border-box;
}

.srb-builder-wrapper {
	font-family: var(--srb-font-ui);
	font-size:   15px;
	line-height: 1.5;
	color:       var(--srb-text-primary);
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   Utility classes
   ========================================================================= */
.srb-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;
}

/* =========================================================================
   Shared Button Styles
   ========================================================================= */
.srb-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	font-family:     var(--srb-font-ui);
	font-size:       13px;
	font-weight:     600;
	letter-spacing:  .01em;
	padding:         8px 18px;
	border-radius:   var(--srb-radius);
	border:          1px solid transparent;
	cursor:          pointer;
	white-space:     nowrap;
	transition:      background var(--srb-t-fast),
	                 color var(--srb-t-fast),
	                 border-color var(--srb-t-fast),
	                 box-shadow var(--srb-t-fast);
	text-decoration: none;
}

.srb-btn:focus-visible {
	outline:        2px solid var(--srb-blue-500);
	outline-offset: 2px;
}

.srb-btn:disabled {
	opacity: .55;
	cursor:  not-allowed;
}

.srb-btn-primary {
	background: var(--srb-blue-600);
	color:      #fff;
	border-color: var(--srb-blue-600);
}
.srb-btn-primary:hover:not(:disabled) {
	background:   var(--srb-blue-700);
	border-color: var(--srb-blue-700);
}

.srb-btn-secondary {
	background:   var(--srb-surface);
	color:        var(--srb-text-primary);
	border-color: var(--srb-border);
	box-shadow:   var(--srb-shadow-sm);
}
.srb-btn-secondary:hover:not(:disabled) {
	background:   var(--srb-gray-50);
	border-color: var(--srb-gray-300);
}

.srb-btn-ghost {
	background:   transparent;
	color:        var(--srb-text-secondary);
	border-color: transparent;
}
.srb-btn-ghost:hover:not(:disabled) {
	color:      var(--srb-text-primary);
	background: var(--srb-gray-100);
}

/* =========================================================================
   Toast notifications
   ========================================================================= */
.srb-toast {
	position:      fixed;
	bottom:        24px;
	right:         24px;
	z-index:       99999;
	padding:       12px 20px;
	border-radius: var(--srb-radius);
	font-size:     13px;
	font-weight:   500;
	box-shadow:    var(--srb-shadow-lg);
	opacity:       0;
	transform:     translateY(8px);
	transition:    opacity var(--srb-t-normal), transform var(--srb-t-normal);
	max-width:     320px;
}

.srb-toast.srb-toast-show {
	opacity:   1;
	transform: translateY(0);
}

.srb-toast-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.srb-toast-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.srb-toast-info    { background: var(--srb-blue-50); color: var(--srb-blue-700); border: 1px solid var(--srb-blue-100); }

/* =========================================================================
   Spinner
   ========================================================================= */
@keyframes srb-spin {
	to { transform: rotate(360deg); }
}

.srb-spinner {
	width:  24px;
	height: 24px;
	border: 2.5px solid var(--srb-gray-200);
	border-top-color: var(--srb-blue-600);
	border-radius: 50%;
	animation: srb-spin .7s linear infinite;
	flex-shrink: 0;
}

/* =========================================================================
   Resume template base styles (shared across all templates)
   ========================================================================= */
.srb-resume {
	font-family: var(--srb-font-resume);
	font-size:   13px;
	line-height: 1.6;
	color:       #1a1a2e;
	background:  #fff;
}

.srb-resume a {
	color:           inherit;
	text-decoration: none;
}

.srb-resume ul,
.srb-resume ol {
	padding-left: 18px;
	margin:       4px 0;
}

.srb-resume li { margin-bottom: 2px; }