/**
 * SkinPoint — Global Typography System
 *
 * Single source of truth for all front-end typography:
 * - Design tokens (:root)
 * - Body / headings / forms
 * - WooCommerce + Checkout
 * - WooCommerce notices
 * - Legal content (regulamin, polityka prywatności)
 * - Tutor LMS (courses, lessons, dashboard, quizzes)
 * - Responsive overrides
 *
 * Enqueued at priority 99 via functions.php — overrides plugin defaults.
 * Does NOT affect wp-admin.
 *
 * @since 2.0.0
 */

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */
:root {
	/* ── Font stacks ── */
	--sp-font-sans: "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--sp-font-serif: "Cormorant Garamond", Georgia, serif;

	/* ── Scale ── */
	--sp-text-xs: 12px;
	--sp-text-sm: 13px;
	--sp-text-base: 15px;
	--sp-text-md: 16px;
	--sp-text-lg: 18px;
	--sp-text-xl: 22px;
	--sp-text-2xl: 28px;
	--sp-text-3xl: 36px;
	--sp-text-4xl: 48px;

	/* ── Leading ── */
	--sp-leading-tight: 1.15;
	--sp-leading-snug: 1.3;
	--sp-leading-normal: 1.5;
	--sp-leading-relaxed: 1.65;

	/* ── Weight ── */
	--sp-weight-regular: 400;
	--sp-weight-medium: 500;
	--sp-weight-semibold: 600;
	--sp-weight-bold: 700;
	--sp-weight-extrabold: 800;

	/* ── Color ── */
	--sp-color-text: #241b20;
	--sp-color-muted: #6f6268;
	--sp-color-soft: #948891;

	/* ── Contrast: on-dark tokens ── */
	--sp-color-on-dark: #fff7f9;
	--sp-color-on-dark-muted: rgba(255, 247, 249, .78);
	--sp-color-on-dark-soft: rgba(255, 247, 249, .62);
}

/* ═══════════════════════════════════════════════════════════════════
   2. GLOBAL FRONT NORMALIZATION
   ═══════════════════════════════════════════════════════════════════ */
body:not(.wp-admin),
body:not(.wp-admin) input,
body:not(.wp-admin) textarea,
body:not(.wp-admin) select,
body:not(.wp-admin) button {
	font-family: var(--sp-font-sans) !important;
	font-size: var(--sp-text-base);
	line-height: var(--sp-leading-normal);
	color: var(--sp-color-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════════════
   3. HEADINGS
   ═══════════════════════════════════════════════════════════════════ */
body:not(.wp-admin) h1,
body:not(.wp-admin) h2,
body:not(.wp-admin) h3,
body:not(.wp-admin) h4,
body:not(.wp-admin) h5,
body:not(.wp-admin) h6 {
	font-family: var(--sp-font-sans) !important;
	color: var(--sp-color-text);
	font-weight: var(--sp-weight-bold);
	line-height: var(--sp-leading-tight);
	letter-spacing: -0.02em;
}
body:not(.wp-admin) h1 { font-size: clamp(32px, 4vw, 48px); }
body:not(.wp-admin) h2 { font-size: clamp(26px, 3vw, 36px); }
body:not(.wp-admin) h3 { font-size: clamp(21px, 2.2vw, 28px); }
body:not(.wp-admin) h4 { font-size: 20px; }
body:not(.wp-admin) h5 { font-size: 17px; }
body:not(.wp-admin) h6 { font-size: 14px; }

/* ── Brand serif — opt-in only ── */
.sp-brand-heading,
.sp-hero-serif {
	font-family: var(--sp-font-serif) !important;
	font-weight: 600;
	letter-spacing: -0.025em;
}

/* ═══════════════════════════════════════════════════════════════════
   4. FORMS — GLOBAL
   ═══════════════════════════════════════════════════════════════════ */
body:not(.wp-admin) label {
	font-size: 13px;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -0.01em;
}
body:not(.wp-admin) input,
body:not(.wp-admin) textarea,
body:not(.wp-admin) select {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════
   5. WOOCOMMERCE + CHECKOUT
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce,
.woocommerce-page,
.woocommerce form,
.woocommerce table,
.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.woocommerce button,
.sp-checkout,
.sp-checkout * {
	font-family: var(--sp-font-sans) !important;
}
.woocommerce label,
.sp-checkout label {
	font-size: 13px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
}
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.sp-checkout input,
.sp-checkout textarea,
.sp-checkout select {
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
}
.sp-checkout .sp-panel__title {
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
}
.sp-checkout .sp-panel__title--sm {
	font-size: 17px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. WOOCOMMERCE NOTICES — icon overlap fix
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	min-height: 64px !important;
	padding: 18px 28px 18px 58px !important;
	margin: 0 0 16px !important;
	border-radius: 18px !important;
	border: 1px solid rgba(122, 24, 55, .14) !important;
	background: rgba(255, 250, 247, .72) !important;
	color: #2b2026 !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	box-shadow: none !important;
	list-style: none !important;
}
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
	position: absolute !important;
	left: 22px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	width: 22px !important;
	height: 22px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   7. LEGAL CONTENT — regulamin, polityka prywatności
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce-terms-and-conditions,
.page-id-privacy-policy,
.sp-legal-content,
.entry-content .legal,
.entry-content .terms,
.entry-content .privacy-policy {
	font-family: var(--sp-font-sans) !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: var(--sp-color-text) !important;
}
.woocommerce-terms-and-conditions h2,
.woocommerce-terms-and-conditions h3,
.woocommerce-terms-and-conditions h4,
.sp-legal-content h2,
.sp-legal-content h3,
.sp-legal-content h4 {
	font-family: var(--sp-font-sans) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   8. TUTOR LMS — GLOBAL TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */

/* ── Font family reset ── */
.tutor-wrap,
.tutor-wrap *,
.tutor-container,
.tutor-container *,
.tutor-dashboard,
.tutor-dashboard *,
.tutor-course-single-content-wrapper,
.tutor-course-single-content-wrapper *,
.tutor-single-course-sidebar,
.tutor-single-course-sidebar *,
.tutor-course-details-page,
.tutor-course-details-page * {
	font-family: var(--sp-font-sans) !important;
}

/* Preserve Tutor's icon font after the global typography reset. */
[class^="tutor-icon-"],
[class*=" tutor-icon-"],
[class^="tutor-icon-"]::before,
[class*=" tutor-icon-"]::before {
	font-family: tutor !important;
	font-style: normal !important;
	font-weight: 400 !important;
	speak: never;
	text-transform: none;
	font-variant: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Tutor headings ── */
.tutor-wrap h1,
.tutor-wrap h2,
.tutor-wrap h3,
.tutor-wrap h4,
.tutor-course-details-page h1,
.tutor-course-details-page h2,
.tutor-course-details-page h3,
.tutor-dashboard h1,
.tutor-dashboard h2,
.tutor-dashboard h3 {
	font-family: var(--sp-font-sans) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.18 !important;
	color: var(--sp-color-text) !important;
}
.tutor-course-details-title,
.tutor-course-title,
.tutor-dashboard-title {
	font-size: clamp(24px, 3vw, 38px) !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
}

/* ── Tutor body text ── */
.tutor-wrap,
.tutor-wrap p,
.tutor-wrap li,
.tutor-wrap td,
.tutor-wrap th,
.tutor-course-details-page,
.tutor-course-details-page p,
.tutor-dashboard,
.tutor-dashboard p {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--sp-color-text) !important;
}

/* ── Tutor meta / small text ── */
.tutor-meta,
.tutor-meta *,
.tutor-course-card .tutor-meta,
.tutor-course-details-info,
.tutor-course-details-info *,
.tutor-course-topic-title,
.tutor-course-topic-item-duration,
.tutor-dashboard-menu-item,
.tutor-fs-7,
.tutor-fs-8 {
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--sp-color-muted) !important;
}

/* ── Tutor buttons ── */
.tutor-btn,
.tutor-button,
.tutor-wrap button,
.tutor-wrap input[type="submit"] {
	font-family: var(--sp-font-sans) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	border-radius: 999px !important;
}

/* ── Tutor forms ── */
.tutor-form-control,
.tutor-form-select,
.tutor-wrap input,
.tutor-wrap textarea,
.tutor-wrap select {
	font-family: var(--sp-font-sans) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
}
.tutor-form-label,
.tutor-wrap label {
	font-size: 13px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	color: var(--sp-color-text) !important;
}

/* ── Tutor course cards ── */
.tutor-course-card .tutor-course-name,
.tutor-course-card .tutor-course-name a {
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.02em !important;
	color: var(--sp-color-text) !important;
}
.tutor-course-card .tutor-course-excerpt,
.tutor-course-card p {
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--sp-color-muted) !important;
}

/* ── Tutor lesson content ── */
.tutor-course-single-content-wrapper .tutor-lesson-content,
.tutor-course-single-content-wrapper .tutor-lesson-content p,
.tutor-course-single-content-wrapper .tutor-lesson-content li {
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: var(--sp-color-text) !important;
}
.tutor-course-single-content-wrapper .tutor-lesson-content h2 {
	font-size: clamp(24px, 2.4vw, 34px) !important;
}
.tutor-course-single-content-wrapper .tutor-lesson-content h3 {
	font-size: clamp(20px, 2vw, 26px) !important;
}

/* ── Tutor dashboard ── */
.tutor-dashboard .tutor-dashboard-menu-item,
.tutor-dashboard .tutor-dashboard-menu-item a {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}
.tutor-dashboard .tutor-dashboard-content h2,
.tutor-dashboard .tutor-dashboard-content h3 {
	font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	:root {
		--sp-text-base: 14px;
		--sp-text-md: 15px;
		--sp-text-lg: 17px;
		--sp-text-xl: 20px;
	}
	body:not(.wp-admin) h1 { font-size: 32px; }
	body:not(.wp-admin) h2 { font-size: 26px; }
	body:not(.wp-admin) h3 { font-size: 22px; }
	.tutor-course-details-title,
	.tutor-course-title,
	.tutor-dashboard-title {
		font-size: 26px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   10. CONTRAST SAFETY LAYER
   Prevents global typography from making dark sections unreadable.
   Works with .sp-bg-dark (auto-applied via sp-contrast.js)
   and explicit dark/hero class patterns.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dark section selectors ── */
.sp-bg-dark,
.sp-dark,
.sp-hero,
:is(section, div, article, header, footer)[class*="hero"],
:is(section, div, article, header, footer)[class*="Hero"],
.has-background.has-black-background-color,
.has-background.has-contrast-background-color,
.wp-block-cover:not(.has-background-dim-0) {
	color: var(--sp-color-on-dark) !important;
}

/* ── Headings inside dark sections ── */
.sp-bg-dark h1, .sp-bg-dark h2, .sp-bg-dark h3,
.sp-bg-dark h4, .sp-bg-dark h5, .sp-bg-dark h6,
.sp-dark h1, .sp-dark h2, .sp-dark h3,
.sp-dark h4, .sp-dark h5, .sp-dark h6,
.sp-hero h1, .sp-hero h2, .sp-hero h3,
.sp-hero h4, .sp-hero h5, .sp-hero h6,
:is(section, div, article, header, footer)[class*="hero"] h1, :is(section, div, article, header, footer)[class*="hero"] h2, :is(section, div, article, header, footer)[class*="hero"] h3,
:is(section, div, article, header, footer)[class*="hero"] h4, :is(section, div, article, header, footer)[class*="hero"] h5, :is(section, div, article, header, footer)[class*="hero"] h6,
:is(section, div, article, header, footer)[class*="Hero"] h1, :is(section, div, article, header, footer)[class*="Hero"] h2, :is(section, div, article, header, footer)[class*="Hero"] h3,
:is(section, div, article, header, footer)[class*="Hero"] h4, :is(section, div, article, header, footer)[class*="Hero"] h5, :is(section, div, article, header, footer)[class*="Hero"] h6,
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3,
.wp-block-cover h4, .wp-block-cover h5, .wp-block-cover h6 {
	color: var(--sp-color-on-dark) !important;
}

/* ── Body text on dark ── */
.sp-bg-dark p, .sp-bg-dark li, .sp-bg-dark span,
.sp-dark p, .sp-dark li, .sp-dark span,
.sp-hero p, .sp-hero li, .sp-hero span,
:is(section, div, article, header, footer)[class*="hero"] p, :is(section, div, article, header, footer)[class*="hero"] li, :is(section, div, article, header, footer)[class*="hero"] span,
:is(section, div, article, header, footer)[class*="Hero"] p, :is(section, div, article, header, footer)[class*="Hero"] li, :is(section, div, article, header, footer)[class*="Hero"] span,
.wp-block-cover p, .wp-block-cover li, .wp-block-cover span {
	color: var(--sp-color-on-dark-muted) !important;
}

/* ── Links on dark (not buttons) ── */
.sp-bg-dark a:not(.button):not(.wp-block-button__link):not([class*="__cta"]):not(.btn),
.sp-dark a:not(.button):not(.wp-block-button__link):not([class*="__cta"]):not(.btn),
.sp-hero a:not(.button):not(.wp-block-button__link):not([class*="__cta"]):not(.btn),
:is(section, div, article, header, footer)[class*="hero"] a:not(.button):not(.wp-block-button__link):not([class*="__cta"]):not(.btn),
:is(section, div, article, header, footer)[class*="Hero"] a:not(.button):not(.wp-block-button__link):not([class*="__cta"]):not(.btn),
.wp-block-cover a:not(.button):not(.wp-block-button__link):not([class*="__cta"]):not(.btn) {
	color: var(--sp-color-on-dark) !important;
}

/* ── Muted / meta text on dark ── */
.sp-bg-dark .sp-text-muted,
.sp-bg-dark .tutor-meta,
.sp-dark .sp-text-muted,
.sp-dark .tutor-meta,
.sp-hero .sp-text-muted {
	color: var(--sp-color-on-dark-soft) !important;
}

/* ── Preserve accent color on dark ── */
.sp-bg-dark .sp-accent,
.sp-dark .sp-accent,
.sp-hero .sp-accent,
:is(section, div, article, header, footer)[class*="hero"] .sp-accent,
:is(section, div, article, header, footer)[class*="Hero"] .sp-accent {
	color: var(--sp-burgundy, #8a1538) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   10b. LIGHT ISLAND RESET
   When a container with a light background sits inside a dark
   section, revert its text to the standard dark color.
   .sp-bg-light is auto-applied by sp-contrast.js.
   Common WP patterns are also explicitly covered.
   ═══════════════════════════════════════════════════════════════════ */
.sp-bg-dark .sp-bg-light,
.sp-bg-dark .has-white-background-color,
.sp-bg-dark .has-background.has-base-background-color,
.sp-bg-dark .wp-block-group:not(.sp-bg-dark),
.sp-bg-dark .wp-block-column:not(.sp-bg-dark) {
	color: var(--sp-color-text) !important;
}
.sp-bg-dark .sp-bg-light h1,
.sp-bg-dark .sp-bg-light h2,
.sp-bg-dark .sp-bg-light h3,
.sp-bg-dark .sp-bg-light h4,
.sp-bg-dark .sp-bg-light h5,
.sp-bg-dark .sp-bg-light h6,
.sp-bg-dark .has-white-background-color h1,
.sp-bg-dark .has-white-background-color h2,
.sp-bg-dark .has-white-background-color h3,
.sp-bg-dark .has-white-background-color h4 {
	color: var(--sp-color-text) !important;
}
.sp-bg-dark .sp-bg-light p,
.sp-bg-dark .sp-bg-light li,
.sp-bg-dark .sp-bg-light span,
.sp-bg-dark .has-white-background-color p,
.sp-bg-dark .has-white-background-color li,
.sp-bg-dark .has-white-background-color span {
	color: var(--sp-color-text) !important;
}
.sp-bg-dark .sp-bg-light a:not(.button):not(.wp-block-button__link):not([class*="__cta"]):not(.btn),
.sp-bg-dark .has-white-background-color a:not(.button):not(.wp-block-button__link):not([class*="__cta"]):not(.btn) {
	color: var(--sp-color-text) !important;
}