/* ==========================================================================
   Moghadam — Unified Typography System
   Single source of truth for fonts, sizes, weights, rhythm, and color text.
   ========================================================================== */

:root {
	/* —— Font family —— */
	--font-family-base: "Anjoman FaNum", Tahoma, sans-serif;
	--app-font-family: var(--font-family-base);
	--app-font: var(--font-family-base);
	--font-main: var(--font-family-base);
	--font-body: var(--font-family-base);
	--font-display: var(--font-family-base);
	--font-ui: var(--font-family-base);
	--font-number: var(--font-family-base);

	/* —— Text colors (landing-aligned) —— */
	--color-text: #1f2430;
	--color-text-strong: #0f172a;
	--color-muted: #7b8090;
	--landing-text: var(--color-text);
	--landing-muted: var(--color-muted);

	/* Legacy aliases */
	--app-text: var(--color-text);
	--app-muted: var(--color-muted);
	--text-primary: var(--color-text-strong);
	--text-secondary: var(--color-text);
	--text-muted: var(--color-muted);
	--auth-text: var(--color-text);
	--auth-text-muted: var(--color-muted, #7b8090);

	/* Landing semantic aliases */
	--text: var(--color-text);
	--muted: var(--color-muted);
	--bg: #f5f6fb;
	--card: #ffffff;
	--border: #e7eaf3;

	/* —— Surface & semantic tokens (light) —— */
	--background: #f5f6fb;
	--surface: #ffffff;
	--surface-raised: #ffffff;
	--surface-elevated: #ffffff;
	--surface-overlay: rgba(255, 255, 255, 0.92);
	--foreground: var(--color-text);
	--foreground-secondary: #475569;
	--foreground-muted: var(--color-muted);
	--foreground-disabled: #94a3b8;
	--border-subtle: rgba(15, 23, 42, 0.06);
	--border-strong: rgba(15, 23, 42, 0.14);
	--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.28);
	--success: #059669;
	--success-fg: #047857;
	--success-bg: rgba(16, 185, 129, 0.12);
	--warning: #d97706;
	--warning-fg: #b45309;
	--warning-bg: rgba(245, 158, 11, 0.12);
	--error: #dc2626;
	--error-fg: #b91c1c;
	--error-bg: rgba(239, 68, 68, 0.1);
	--info: #2563eb;
	--info-fg: #1d4ed8;
	--info-bg: rgba(59, 130, 246, 0.1);

	/* —— Default color theme: blue —— */
	--primary: #3b82f6;
	--primary-dark: #2563eb;
	--primary-light: #dbeafe;
	--primary-glow: rgba(59, 130, 246, 0.3);
	--secondary: #14b8a6;
	--secondary-dark: #0d9488;
	--secondary-light: #ccfbf1;
	--secondary-glow: rgba(20, 184, 166, 0.3);

	/* —— Type scale —— */
	--type-caption-size: clamp(0.6875rem, 2.8vw, 0.8125rem); /* 11–13px kicker */
	--type-sm-size: clamp(0.75rem, 3vw, 0.8125rem); /* 12–13px labels */
	--type-base-size: clamp(0.875rem, 0.88rem + 0.22vw, 1rem); /* 14–16px body */
	--type-md-size: clamp(0.8125rem, 3.2vw, 0.9375rem); /* 13–15px UI */
	--type-lg-size: clamp(1.125rem, 1rem + 0.72vw, 1.375rem); /* 18–22px section */
	--type-xl-size: clamp(1.375rem, 1.24rem + 1.15vw, 2rem); /* 22–32px page title */
	--type-display-size: clamp(1.85rem, 1.8vw + 1rem, 3rem); /* marketing/login */

	/* Legacy step / font-size aliases */
	--step--1: var(--type-sm-size);
	--step-0: var(--type-base-size);
	--step-1: var(--type-md-size);
	--step-2: var(--type-lg-size);
	--step-3: var(--type-xl-size);
	--font-size-sm: var(--type-sm-size);
	--font-size-base: var(--type-base-size);
	--font-size-lg: var(--type-md-size);

	/* Auth aliases */
	--auth-body-size: var(--type-base-size);
	--auth-label-size: var(--type-md-size);
	--auth-title-size: var(--type-xl-size);
	--auth-display-size: var(--type-display-size);

	/* —— Weights (valid CSS only) —— */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;
	--weight-black: 900;

	/* —— Line height —— */
	--leading-tight: 1.2;
	--leading-snug: 1.3;
	--leading-title: 1.35;
	--leading-normal: 1.55;
	--leading-body: 1.7;

	/* —— Letter spacing —— */
	--tracking-tight: -0.02em;
	--tracking-snug: -0.015em;
	--tracking-normal: 0;
	--tracking-wide: 0.01em;
}

html[data-bs-theme="dark"] {
	color-scheme: dark;

	/* Text */
	--color-text: #e2e8f0;
	--color-text-strong: #f8fafc;
	--color-muted: #94a3b8;
	--text: var(--color-text);
	--muted: var(--color-muted);
	--text-primary: var(--color-text-strong);
	--text-secondary: var(--color-text);
	--text-muted: #94a3b8;
	--auth-text: var(--color-text);
	--auth-text-muted: #94a3b8;

	/* Surfaces — layered hierarchy */
	--background: #0b1120;
	--bg: #0b1120;
	--bg-page: #0b1120;
	--surface: #111827;
	--surface-raised: #1a2332;
	--surface-elevated: #1e293b;
	--surface-overlay: rgba(15, 23, 42, 0.92);
	--card: #111827;
	--bg-card: #111827;
	--glass-bg: rgba(17, 24, 39, 0.88);
	--glass-border: rgba(148, 163, 184, 0.16);

	/* Foreground */
	--foreground: #f1f5f9;
	--foreground-secondary: #cbd5e1;
	--foreground-muted: #94a3b8;
	--foreground-disabled: #64748b;

	/* Borders */
	--border: rgba(148, 163, 184, 0.2);
	--border-subtle: rgba(148, 163, 184, 0.1);
	--border-strong: rgba(148, 163, 184, 0.28);

	/* Primary tuned for dark backgrounds */
	--primary-light: rgba(59, 130, 246, 0.16);
	--primary-glow: rgba(59, 130, 246, 0.35);
	--secondary-light: rgba(20, 184, 166, 0.14);
	--focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.38);

	/* Semantic status */
	--success: #34d399;
	--success-fg: #6ee7b7;
	--success-bg: rgba(52, 211, 153, 0.14);
	--warning: #fbbf24;
	--warning-fg: #fcd34d;
	--warning-bg: rgba(251, 191, 36, 0.14);
	--error: #f87171;
	--error-fg: #fca5a5;
	--error-bg: rgba(248, 113, 113, 0.14);
	--info: #60a5fa;
	--info-fg: #93c5fd;
	--info-bg: rgba(96, 165, 250, 0.14);

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
	--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-bs-theme="light"]) {
		--color-text: #e2e8f0;
		--color-text-strong: #f8fafc;
		--color-muted: #94a3b8;
		--background: #0b1120;
		--surface: #111827;
		--foreground: #f1f5f9;
		--border: rgba(148, 163, 184, 0.2);
	}
}

/* —— Base —— */
html {
	font-size: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--type-base-size);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
	color: var(--color-text);
}

html,
body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.nav-link,
.dropdown-item {
	font-family: var(--font-family-base);
}

/* Font Awesome must keep its own family */
i,
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
.fa-solid,
.fa-regular,
.fa-brands {
	font-family: "Font Awesome 6 Free" !important;
}

/* —— Headings —— */
h1,
.h1 {
	font-size: var(--type-xl-size);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-snug);
	color: var(--color-text-strong);
}

h2,
.h2 {
	font-size: var(--type-lg-size);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-title);
	letter-spacing: var(--tracking-snug);
	color: var(--color-text-strong);
}

h3,
.h3,
.card-title {
	font-size: var(--type-lg-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-title);
	letter-spacing: var(--tracking-snug);
	color: var(--color-text-strong);
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-size: var(--type-md-size);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-text);
}

/* —— Body text —— */
p,
li,
dd,
dt,
blockquote {
	font-size: var(--type-base-size);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
	color: var(--color-text);
}

small,
.small,
.text-muted,
.text-secondary {
	font-size: var(--type-sm-size);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
	color: var(--color-muted);
}

/* —— Labels & forms —— */
label,
.form-label,
.col-form-label {
	font-size: var(--type-md-size);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-text);
}

.form-control,
.form-select,
.input-group-text,
textarea.form-control {
	font-size: var(--type-base-size);
	font-weight: var(--weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-text);
}

.form-text,
.invalid-feedback,
.valid-feedback {
	font-size: var(--type-sm-size);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
}

::placeholder {
	color: var(--color-muted);
	opacity: 1;
	font-weight: var(--weight-regular);
}

/* —— Buttons —— */
.btn,
button:not([class*="fa-"]) {
	font-size: var(--type-sm-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-normal);
}

.btn-lg {
	font-size: var(--type-base-size);
	font-weight: var(--weight-bold);
}

.btn-sm {
	font-size: var(--type-caption-size);
	font-weight: var(--weight-semibold);
}

/* —— Navigation —— */
.nav-link,
.navbar-brand,
.breadcrumb,
.breadcrumb-item,
.dropdown-item,
.dropdown-header,
.page-back-btn,
.app-sheet-toolbar__back,
.app-mobile-menu__back {
	font-size: var(--type-sm-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-normal);
}

.brand-text {
	font-size: var(--type-md-size) !important;
	font-weight: var(--weight-extrabold) !important;
	line-height: var(--leading-snug) !important;
	letter-spacing: var(--tracking-snug) !important;
}

.user-display-name {
	font-size: var(--type-sm-size);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-normal);
	color: var(--color-text);
}

/* —— Tables —— */
table,
.table {
	font-size: var(--type-base-size);
	font-weight: var(--weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-text);
}

table th,
.table thead th {
	font-size: var(--type-sm-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-muted);
}

table td,
.table tbody td {
	font-size: var(--type-base-size);
	font-weight: var(--weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-text);
}

/* —— Alerts & messages —— */
.alert,
.toast,
.notification-banner,
.global-banner,
.glass-alert {
	font-size: var(--type-base-size);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
}

/* —— Cards & sections —— */
.card-header,
.card-footer,
.modal-title,
.offcanvas-title,
.accordion-button {
	font-size: var(--type-md-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-text);
}

.section-title,
.profile-card__title,
.app-mobile-menu__section-title {
	font-size: var(--type-caption-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-wide);
	color: var(--color-muted);
	text-transform: none;
}

/* —— User names & profile —— */
.profile-hero__name,
.app-mobile-menu__user-text strong,
.spot-slide__title,
.submodule-title {
	font-size: var(--type-lg-size);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-snug);
	color: var(--color-text-strong);
}

.profile-hero__meta,
.app-mobile-menu__user-text span,
.spot-slide__kicker,
.spot-slide__desc,
.submodule-desc {
	font-size: var(--type-caption-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-wide);
	color: var(--color-muted);
}

.service-label,
.profile-link,
.profile-social,
.app-mobile-menu__action-label,
.app-sheet-toolbar__back span {
	font-size: var(--type-sm-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-text);
}

/* —— Bottom nav —— */
.app-bottom-nav__label {
	font-size: var(--type-caption-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
}

/* —— Select2 / Tom Select —— */
.select2-container .select2-selection__rendered,
.ts-control,
.choices__inner,
.choices__item {
	font-size: var(--type-base-size) !important;
	font-weight: var(--weight-regular) !important;
	line-height: var(--leading-normal) !important;
}

/* —— Utility classes —— */
.type-caption {
	font-size: var(--type-caption-size);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-wide);
}

.type-sm {
	font-size: var(--type-sm-size);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-normal);
}

.type-base {
	font-size: var(--type-base-size);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
}

.type-md {
	font-size: var(--type-md-size);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-normal);
}

.type-lg {
	font-size: var(--type-lg-size);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-snug);
}

.type-xl {
	font-size: var(--type-xl-size);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-snug);
}

.type-muted {
	color: var(--color-muted);
}

.type-strong {
	color: var(--color-text-strong);
	font-weight: var(--weight-bold);
}