/* ==========================================================================
   Fight Club LI - Marketing Site Styles
   Based on Geist Design System (https://vercel.com/geist)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Geist Color Palette)
   -------------------------------------------------------------------------- */
:root {
	/* Grayscale */
	--color-background: #fff;
	--color-foreground: #000;
	--color-accents-1: #fafafa;
	--color-accents-2: #eaeaea;
	--color-accents-3: #999;
	--color-accents-4: #888;
	--color-accents-5: #666;
	--color-accents-6: #444;
	--color-accents-7: #333;
	--color-accents-8: #111;

	/* Semantic Colors */
	--color-success: #0070f3;
	--color-success-light: #3291ff;
	--color-success-lighter: #d3e5ff;
	--color-success-dark: #0761d1;

	--color-error: #e00;
	--color-error-light: #ff1a1a;
	--color-error-lighter: #f7d4d6;
	--color-error-dark: #c50000;

	--color-warning: #f5a623;
	--color-warning-light: #f7b955;
	--color-warning-lighter: #ffefcf;
	--color-warning-dark: #ab570a;

	/* Accent Colors */
	--color-cyan: #50e3c2;
	--color-cyan-light: #79ffe1;
	--color-violet: #7928ca;
	--color-purple: #f81ce5;
	--color-magenta: #eb367f;
	--color-alert: #ff0080;
	--color-green-800: #0A6640;
	--color-pink-700: #E93D82;

	/* Functional */
	--color-link: var(--color-pink-700);
	--color-selection: #79ffe1;
	--color-border: #eaeaea;
	--color-code: #f81ce5;

	/* Typography */
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Consolas', monospace;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-normal: 250ms ease;
}

/* --------------------------------------------------------------------------
   Reset & Base Styles
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-sans);
	background-color: var(--color-accents-2);
	color: var(--color-foreground);
	line-height: 1.6;
	min-height: 100vh;
}

::selection {
	background-color: var(--color-selection);
	color: var(--color-foreground);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

h1 {
	font-size: 4.5rem;
	font-weight: 700;
	letter-spacing: -0.04em;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

p {
	color: var(--color-accents-5);
	font-size: 1.125rem;
}

a {
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-success-dark);
}

small {
	font-size: 0.875rem;
	color: var(--color-accents-4);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-5);
}

.container--narrow {
	max-width: 640px;
}

.container--medium {
	max-width: 800px;
}

/* --------------------------------------------------------------------------
   Page Layout - Centered Hero
   -------------------------------------------------------------------------- */
.page-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--space-6);
	text-align: center;
}

.hero {
	max-width: 680px;
}

.hero__title {
	margin-bottom: var(--space-6);
}

.hero__quote {
	font-size: 1.25rem;
	color: var(--color-pink-700);
	font-style: italic;
	margin-bottom: var(--space-7);
	text-align: center;
	position: relative;
	line-height: 1.6;
}

.quote-mark {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 3rem;
	font-style: normal;
	line-height: 0;
	vertical-align: middle;
	color: var(--color-pink-700);
}

.quote-mark--open {
	margin-right: 0.1em;
}

.quote-mark--close {
	margin-left: 0.1em;
}

/* Colored text for title */
.text-accent {
	color: var(--color-pink-700);
}

.hero__text {
	margin-bottom: var(--space-5);
	font-size: 1.125rem;
}

.hero__cta {
	margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	font-size: 1rem;
	font-weight: 500;
	font-family: inherit;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--transition-fast);
	text-decoration: none;
}

.btn--primary {
	background-color: var(--color-foreground);
	color: var(--color-background);
	border-color: var(--color-foreground);
}

.btn--primary:hover {
	background-color: var(--color-accents-7);
	border-color: var(--color-accents-7);
	color: var(--color-background);
}

.btn--secondary {
	background-color: var(--color-background);
	color: var(--color-foreground);
	border-color: var(--color-border);
}

.btn--secondary:hover {
	background-color: var(--color-accents-1);
	border-color: var(--color-accents-3);
}

.btn--pink {
	background-color: var(--color-pink-700);
	color: var(--color-background);
	border-color: var(--color-pink-700);
}

.btn--pink:hover {
	background-color: #D42D72;
	border-color: #D42D72;
	color: var(--color-background);
}

.btn--large {
	padding: var(--space-4) var(--space-6);
	font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form {
	width: 100%;
}

.form__group {
	margin-bottom: var(--space-5);
	text-align: left;
}

.form__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-foreground);
	margin-bottom: var(--space-2);
}

.form__label--required::after {
	content: ' *';
	color: var(--color-error);
}

.form__input,
.form__select,
.form__textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-size: 1rem;
	font-family: inherit;
	color: var(--color-foreground);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
	outline: none;
	border-color: var(--color-foreground);
	box-shadow: 0 0 0 1px var(--color-foreground);
}

.form__input::placeholder,
.form__textarea::placeholder {
	color: var(--color-accents-3);
}

.form__textarea {
	min-height: 120px;
	resize: vertical;
}

.form__help {
	font-size: 0.75rem;
	color: var(--color-accents-4);
	margin-top: var(--space-1);
}

.form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

@media (max-width: 640px) {
	.form__row {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.card--elevated {
	box-shadow: var(--shadow-lg);
	border: none;
}

.card__header {
	margin-bottom: var(--space-5);
}

.card__title {
	font-size: 1.5rem;
	margin-bottom: var(--space-2);
}

.card__description {
	color: var(--color-accents-5);
}

/* --------------------------------------------------------------------------
   Page Header (for internal pages)
   -------------------------------------------------------------------------- */
.page-header {
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-5);
}

.page-header__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.875rem;
	color: var(--color-accents-5);
	margin-bottom: var(--space-4);
}

.page-header__back:hover {
	color: var(--color-foreground);
}

.page-header__title {
	font-size: 3rem;
	margin-bottom: var(--space-2);
}

.page-header__subtitle {
	color: var(--color-accents-5);
	font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.footer__text {
	font-size: 0.875rem;
	color: var(--color-accents-4);
}

.footer__links {
	display: flex;
	justify-content: center;
	gap: var(--space-5);
	margin-top: var(--space-3);
}

.footer__link {
	font-size: 0.875rem;
	color: var(--color-accents-4);
}

.footer__link:hover {
	color: var(--color-foreground);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.text-center {
	text-align: center;
}

.text-muted {
	color: var(--color-accents-5);
}

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	h1 {
		font-size: 3rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	.hero__quote {
		font-size: 1.125rem;
	}

	.quote-mark {
		font-size: 2.5rem;
	}

	.page-centered {
		padding: var(--space-5);
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: 2.5rem;
	}

	.btn--large {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Alerts / Messages
   -------------------------------------------------------------------------- */
.alert {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-5);
}

.alert--info {
	background-color: var(--color-success-lighter);
	border: 1px solid var(--color-success-light);
	color: var(--color-success-dark);
}

.alert--warning {
	background-color: var(--color-warning-lighter);
	border: 1px solid var(--color-warning-light);
	color: var(--color-warning-dark);
}

.alert--error {
	background-color: var(--color-error-lighter);
	border: 1px solid var(--color-error-light);
	color: var(--color-error-dark);
}

/* --------------------------------------------------------------------------
   Character Counter
   -------------------------------------------------------------------------- */
.char-counter {
	display: flex;
	justify-content: flex-end;
	font-size: 0.75rem;
	color: var(--color-accents-4);
	margin-top: var(--space-1);
}

.char-counter--warning {
	color: var(--color-warning);
}

.char-counter--error {
	color: var(--color-error);
}

/* --------------------------------------------------------------------------
   Checkbox
   -------------------------------------------------------------------------- */
.form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: 0.875rem;
	color: var(--color-accents-5);
	cursor: pointer;
}

.form__checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--color-pink-700);
	cursor: pointer;
}

.form__checkbox span {
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Form Input Error State
   -------------------------------------------------------------------------- */
.form__input--error,
.form__select--error,
.form__textarea--error {
	border-color: var(--color-error);
}

.form__input--error:focus,
.form__select--error:focus,
.form__textarea--error:focus {
	border-color: var(--color-error);
	box-shadow: 0 0 0 1px var(--color-error);
}

/* --------------------------------------------------------------------------
   Field Errors List
   -------------------------------------------------------------------------- */
.field-errors {
	background-color: var(--color-error-lighter);
	border: 1px solid var(--color-error-light);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
}

.field-errors__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.field-errors__list li {
	color: var(--color-error-dark);
	font-size: 0.875rem;
	padding: var(--space-1) 0;
}

.field-errors__list li::before {
	content: '• ';
}

/* --------------------------------------------------------------------------
   Success Alert
   -------------------------------------------------------------------------- */
.alert--success {
	background-color: #d1fae5;
	border: 1px solid #6ee7b7;
	color: #065f46;
}

/* --------------------------------------------------------------------------
   Button Loading State
   -------------------------------------------------------------------------- */
.btn--loading {
	opacity: 0.7;
	cursor: not-allowed;
}

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