/**
 * AnteEnti Telugu Q&A UI - Base Design System
 *
 * Purpose:
 * - Define Telugu-first visual foundation
 * - Load global design tokens
 * - Set typography, background, buttons, and cards
 */


/* ---------------------------------------------------------
   1. Design Tokens
--------------------------------------------------------- */

:root {
	/* Font */
	--anteenti-font-main: "Anek Telugu", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Background colors */
	--anteenti-color-bg: #f8f1e4;
	--anteenti-color-bg-soft: #fbf6ed;
	--anteenti-color-surface: #fffaf1;
	--anteenti-color-surface-white: #ffffff;

	/* Telugu cultural primary colors */
	--anteenti-color-primary: #7a1f2b;
	--anteenti-color-primary-dark: #54131d;
	--anteenti-color-primary-soft: #f3dfe2;

	/* Action colors */
	--anteenti-color-action: #1f8a4c;
	--anteenti-color-action-dark: #146536;
	--anteenti-color-action-soft: #e0f4e8;

	/* Supporting warm colors */
	--anteenti-color-gold: #c98a1f;
	--anteenti-color-gold-soft: #fff1cf;
	--anteenti-color-orange-soft: #fde8d5;

	/* Text colors */
	--anteenti-color-text: #241816;
	--anteenti-color-text-soft: #4d3935;
	--anteenti-color-muted: #75645f;
	--anteenti-color-light: #9a8a84;

	/* Border colors */
	--anteenti-color-border: #eadcc7;
	--anteenti-color-border-strong: #dcc7a9;

	/* Status colors */
	--anteenti-color-success: #1f8a4c;
	--anteenti-color-warning: #c98a1f;
	--anteenti-color-error: #b42318;
	--anteenti-color-info: #2563eb;

	/* Radius */
	--anteenti-radius-xs: 6px;
	--anteenti-radius-sm: 8px;
	--anteenti-radius-md: 14px;
	--anteenti-radius-lg: 20px;
	--anteenti-radius-xl: 28px;
	--anteenti-radius-pill: 999px;

	/* Shadows */
	--anteenti-shadow-xs: 0 2px 8px rgba(84, 19, 29, 0.05);
	--anteenti-shadow-sm: 0 6px 18px rgba(84, 19, 29, 0.07);
	--anteenti-shadow-md: 0 10px 30px rgba(84, 19, 29, 0.09);
	--anteenti-shadow-card: 0 8px 24px rgba(84, 19, 29, 0.08);

	/* Spacing */
	--anteenti-space-2xs: 4px;
	--anteenti-space-xs: 8px;
	--anteenti-space-sm: 12px;
	--anteenti-space-md: 16px;
	--anteenti-space-lg: 24px;
	--anteenti-space-xl: 32px;
	--anteenti-space-2xl: 48px;

	/* Layout */
	--anteenti-container-width: 1180px;
	--anteenti-content-width: 760px;

	/* Transitions */
	--anteenti-transition-fast: 160ms ease;
	--anteenti-transition-normal: 240ms ease;
}


/* ---------------------------------------------------------
   2. Base Page Foundation
--------------------------------------------------------- */

body.anteenti-qa-ui {
	font-family: var(--anteenti-font-main);
	background: var(--anteenti-color-bg);
	color: var(--anteenti-color-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/**
 * Keep all custom styling scoped to our Q&A pages.
 */
body.anteenti-qa-ui * {
	box-sizing: border-box;
}


/* ---------------------------------------------------------
   3. Typography
--------------------------------------------------------- */

body.anteenti-qa-ui h1,
body.anteenti-qa-ui h2,
body.anteenti-qa-ui h3,
body.anteenti-qa-ui h4,
body.anteenti-qa-ui h5,
body.anteenti-qa-ui h6 {
	font-family: var(--anteenti-font-main);
	color: var(--anteenti-color-text);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-top: 0;
}

body.anteenti-qa-ui h1 {
	font-size: clamp(2rem, 4vw, 3.5rem);
}

body.anteenti-qa-ui h2 {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
}

body.anteenti-qa-ui h3 {
	font-size: clamp(1.3rem, 2vw, 1.8rem);
}

body.anteenti-qa-ui h4 {
	font-size: 1.2rem;
}

body.anteenti-qa-ui h5 {
	font-size: 1.05rem;
}

body.anteenti-qa-ui h6 {
	font-size: 0.95rem;
}

body.anteenti-qa-ui p {
	font-family: var(--anteenti-font-main);
	color: var(--anteenti-color-text-soft);
	font-size: 1rem;
	line-height: 1.75;
	margin-top: 0;
}

body.anteenti-qa-ui a {
	color: var(--anteenti-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--anteenti-transition-fast);
}

body.anteenti-qa-ui a:hover {
	color: var(--anteenti-color-primary-dark);
}

body.anteenti-qa-ui small {
	color: var(--anteenti-color-muted);
	font-size: 0.875rem;
}

body.anteenti-qa-ui strong,
body.anteenti-qa-ui b {
	font-weight: 700;
	color: var(--anteenti-color-text);
}


/* ---------------------------------------------------------
   4. Reusable Text Utility Classes
--------------------------------------------------------- */

body.anteenti-qa-ui .anteenti-text-muted {
	color: var(--anteenti-color-muted);
}

body.anteenti-qa-ui .anteenti-text-primary {
	color: var(--anteenti-color-primary);
}

body.anteenti-qa-ui .anteenti-text-action {
	color: var(--anteenti-color-action);
}

body.anteenti-qa-ui .anteenti-section-title {
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: var(--anteenti-space-sm);
}

body.anteenti-qa-ui .anteenti-section-subtitle {
	color: var(--anteenti-color-muted);
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: var(--anteenti-space-lg);
}


/* ---------------------------------------------------------
   5. Button Base Styles
--------------------------------------------------------- */

body.anteenti-qa-ui .anteenti-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--anteenti-radius-pill);
	font-family: var(--anteenti-font-main);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--anteenti-transition-fast),
		color var(--anteenti-transition-fast),
		border-color var(--anteenti-transition-fast),
		box-shadow var(--anteenti-transition-fast),
		transform var(--anteenti-transition-fast);
}

body.anteenti-qa-ui .anteenti-btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

body.anteenti-qa-ui .anteenti-btn:focus {
	outline: 3px solid rgba(122, 31, 43, 0.22);
	outline-offset: 2px;
}

body.anteenti-qa-ui .anteenti-btn-primary {
	background: var(--anteenti-color-primary);
	color: #ffffff;
	box-shadow: var(--anteenti-shadow-xs);
}

body.anteenti-qa-ui .anteenti-btn-primary:hover {
	background: var(--anteenti-color-primary-dark);
	color: #ffffff;
	box-shadow: var(--anteenti-shadow-sm);
}

body.anteenti-qa-ui .anteenti-btn-action {
	background: var(--anteenti-color-action);
	color: #ffffff;
	box-shadow: var(--anteenti-shadow-xs);
}

body.anteenti-qa-ui .anteenti-btn-action:hover {
	background: var(--anteenti-color-action-dark);
	color: #ffffff;
	box-shadow: var(--anteenti-shadow-sm);
}

body.anteenti-qa-ui .anteenti-btn-soft {
	background: var(--anteenti-color-primary-soft);
	color: var(--anteenti-color-primary-dark);
	border-color: rgba(122, 31, 43, 0.08);
}

body.anteenti-qa-ui .anteenti-btn-soft:hover {
	background: #ead1d6;
	color: var(--anteenti-color-primary-dark);
}

body.anteenti-qa-ui .anteenti-btn-outline {
	background: transparent;
	color: var(--anteenti-color-primary);
	border-color: var(--anteenti-color-border-strong);
}

body.anteenti-qa-ui .anteenti-btn-outline:hover {
	background: var(--anteenti-color-surface);
	color: var(--anteenti-color-primary-dark);
	border-color: var(--anteenti-color-primary);
}

body.anteenti-qa-ui .anteenti-btn-block {
	width: 100%;
}


/* ---------------------------------------------------------
   6. Card Base Styles
--------------------------------------------------------- */

body.anteenti-qa-ui .anteenti-card {
	background: var(--anteenti-color-surface);
	border: 1px solid var(--anteenti-color-border);
	border-radius: var(--anteenti-radius-lg);
	box-shadow: var(--anteenti-shadow-card);
	padding: var(--anteenti-space-lg);
}

body.anteenti-qa-ui .anteenti-card-white {
	background: var(--anteenti-color-surface-white);
}

body.anteenti-qa-ui .anteenti-card-soft {
	background: var(--anteenti-color-bg-soft);
}

body.anteenti-qa-ui .anteenti-card-hover {
	transition:
		transform var(--anteenti-transition-fast),
		box-shadow var(--anteenti-transition-fast),
		border-color var(--anteenti-transition-fast);
}

body.anteenti-qa-ui .anteenti-card-hover:hover {
	transform: translateY(-2px);
	box-shadow: var(--anteenti-shadow-md);
	border-color: var(--anteenti-color-border-strong);
}

body.anteenti-qa-ui .anteenti-card-title {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.45;
	margin-bottom: var(--anteenti-space-xs);
	color: var(--anteenti-color-text);
}

body.anteenti-qa-ui .anteenti-card-text {
	color: var(--anteenti-color-text-soft);
	font-size: 0.96rem;
	line-height: 1.7;
	margin-bottom: 0;
}

body.anteenti-qa-ui .anteenti-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--anteenti-color-muted);
	font-size: 0.88rem;
	line-height: 1.4;
}


/* ---------------------------------------------------------
   7. Surface / Container Helpers
--------------------------------------------------------- */

body.anteenti-qa-ui .anteenti-container {
	width: min(100% - 32px, var(--anteenti-container-width));
	margin-inline: auto;
}

body.anteenti-qa-ui .anteenti-content {
	width: min(100%, var(--anteenti-content-width));
}

body.anteenti-qa-ui .anteenti-surface {
	background: var(--anteenti-color-surface);
	border: 1px solid var(--anteenti-color-border);
	border-radius: var(--anteenti-radius-lg);
}

body.anteenti-qa-ui .anteenti-divider {
	height: 1px;
	background: var(--anteenti-color-border);
	border: 0;
	margin: var(--anteenti-space-lg) 0;
}


/* ---------------------------------------------------------
   8. Forms Base Helpers
--------------------------------------------------------- */

body.anteenti-qa-ui .anteenti-input,
body.anteenti-qa-ui .anteenti-select,
body.anteenti-qa-ui .anteenti-textarea {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--anteenti-color-border-strong);
	border-radius: var(--anteenti-radius-md);
	background: #ffffff;
	color: var(--anteenti-color-text);
	font-family: var(--anteenti-font-main);
	font-size: 1rem;
	padding: 10px 14px;
	transition:
		border-color var(--anteenti-transition-fast),
		box-shadow var(--anteenti-transition-fast);
}

body.anteenti-qa-ui .anteenti-textarea {
	min-height: 130px;
	resize: vertical;
}

body.anteenti-qa-ui .anteenti-input:focus,
body.anteenti-qa-ui .anteenti-select:focus,
body.anteenti-qa-ui .anteenti-textarea:focus {
	outline: none;
	border-color: var(--anteenti-color-primary);
	box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.14);
}


/* ---------------------------------------------------------
   9. Mobile Base Adjustments
--------------------------------------------------------- */

@media (max-width: 768px) {
	body.anteenti-qa-ui {
		background: var(--anteenti-color-bg);
	}

	body.anteenti-qa-ui .anteenti-container {
		width: min(100% - 24px, var(--anteenti-container-width));
	}

	body.anteenti-qa-ui .anteenti-card {
		border-radius: var(--anteenti-radius-md);
		padding: var(--anteenti-space-md);
	}

	body.anteenti-qa-ui .anteenti-btn {
		min-height: 44px;
		padding: 10px 16px;
	}
}


/* ---------------------------------------------------------
   10. Safety Notes
--------------------------------------------------------- */

/**
 * Do not add styles for these here:
 * - .site-header
 * - .header-main
 * - .navbar
 * - .menu
 * - .main-navigation
 * - .ap-question
 * - .ap-questions
 * - .ap-list-head
 * - .ap-single
 *
 * Neve and AnsPress component styling will be handled later
 * in separate scoped files.
 */
/* ---------------------------------------------------------
   Mobile Bottom Nav Page Spacing
--------------------------------------------------------- */

@media (max-width: 768px) {
	body.anteenti-qa-ui {
		padding-bottom: 92px;
	}
}