/**
 * Universal Archetype Skeleton — Layer 1 (Path B Recipes architecture).
 *
 * Defines shared design tokens used przez wszystkie variants + themes.
 * Loaded ZAWSZE gdy body has class .aibt-universal.
 *
 * Spec: docs/architecture/v2-path-b/universal-skeleton.md
 *
 * NIE definiuje:
 *   - Konkretne kolory  (czeka theme: aibt-theme-{slug})
 *   - Konkretne fonty   (czeka theme)
 *   - Layout per sekcja (czeka variant: .universal-{role}--{variant})
 *
 * DEFINIUJE:
 *   - Spacing scale (modular)
 *   - Typography scale (1.25 ratio)
 *   - Motion principles (easings + durations)
 *   - A11y baseline (target size, focus ring)
 *   - Layout widths
 *
 * @package AI_Base_Theme
 * @since 2026-05-27 (Phase 2 Path B)
 */

:root,
body.aibt-universal {
	/* === Spacing scale (modular, t-shirt sizing) === */
	--space-3xs: 0.25rem;   /* 4px */
	--space-2xs: 0.5rem;    /* 8px */
	--space-xs:  0.75rem;   /* 12px */
	--space-sm:  1rem;      /* 16px */
	--space-md:  1.5rem;    /* 24px */
	--space-lg:  2.5rem;    /* 40px */
	--space-xl:  4rem;      /* 64px */
	--space-2xl: 6rem;      /* 96px */
	--space-3xl: clamp(7rem, 14vh, 11rem);  /* section padding-block, fluid */

	/* === Typography scale (1.25 ratio, fluid clamp) === */
	--text-xs:   0.78rem;   /* kicker / labels */
	--text-sm:   0.92rem;   /* small body */
	--text-base: 1.05rem;   /* body default */
	--text-lg:   clamp(1.15rem, 1.4vw, 1.4rem);   /* lead text */
	--text-xl:   clamp(1.4rem, 2vw, 1.8rem);      /* h4 / dish title */
	--text-2xl:  clamp(1.8rem, 3vw, 2.5rem);      /* h3 / card title */
	--text-3xl:  clamp(2.2rem, 4.5vw, 4rem);      /* h2 / section heading */
	--text-4xl:  clamp(2.5rem, 6vw, 6rem);        /* h1 hero */
	--text-display: clamp(4rem, 14vw, 13rem);     /* masthead / footer brand */

	/* === Line heights === */
	--leading-tight:    0.95;   /* huge displays */
	--leading-snug:     1.05;   /* headlines */
	--leading-normal:   1.5;    /* body short */
	--leading-relaxed:  1.65;   /* body long form */
	--leading-loose:    1.85;   /* generous editorial body */

	/* === Letter spacing === */
	--tracking-tight:    -0.04em;  /* huge serif headlines */
	--tracking-normal:   -0.02em;  /* sub-headlines */
	--tracking-wide:      0.04em;  /* button labels */
	--tracking-wider:     0.12em;  /* small labels */
	--tracking-widest:    0.24em;  /* kicker uppercase */

	/* === Motion === */
	--ease-elegant: cubic-bezier(0.165, 0.84, 0.44, 1);  /* slow editorial — restaurant, fashion */
	--ease-snappy:  cubic-bezier(0.22, 1, 0.36, 1);      /* tech precise — IT, SaaS */
	--ease-default: cubic-bezier(0.4, 0, 0.2, 1);        /* general purpose */

	--duration-fast:    240ms;   /* hover, micro */
	--duration-medium:  480ms;   /* page elements */
	--duration-slow:    900ms;   /* hero reveal, section fade */

	/* === Layout widths === */
	--max-content: 800px;       /* body text reading width */
	--max-wide:    1280px;      /* hero / wide layouts */
	--max-ultra:   1400px;      /* full-page sections */
	--header-h:    4.75rem;     /* transparent-header overlay: top space the floating nav reserves on the hero */

	/* === A11y === */
	--target-min:    44px;       /* touch target minimum (Apple HIG, Material) */
	--focus-offset:  4px;
	/* --focus-ring inherits theme accent — set by theme */
}

/* === Default section spacing === */
body.aibt-universal section {
	padding-block: var(--space-3xl);
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
}

/* === Body baseline === */
body.aibt-universal {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* === Universal motion respect === */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal *,
	body.aibt-universal *::before,
	body.aibt-universal *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* === Universal a11y focus === */
body.aibt-universal :focus-visible {
	outline: 2px solid var(--accent, currentColor);
	outline-offset: var(--focus-offset);
}

/* === Editor wrapper override (block editor doesn't run scroll JS) === */
.editor-styles-wrapper [class*="universal-"] {
	opacity: 1 !important;
	transform: none !important;
}

/* === Per-section background override (recipe `section_bg` map) ================
   Recipes can force a stacked LIGHT section onto --background (base) or
   --background-alt (alt) so consecutive light sections keep an ABAB rhythm
   instead of merging into a "wall of cream". The recipe loader appends
   `aiss-bg--{base|alt}` to the section wrapper class. Light shades only — dark
   sections (hero/trust/conversion/footer) keep their own background + on-dark
   text, so they are simply left out of the map. */
body.aibt-universal .aiss-bg--base { background: var(--background) !important; }
body.aibt-universal .aiss-bg--alt  { background: var(--background-alt) !important; }

/* === Footer anchor floor (always-dark surface) =================================
   21/22 themes ship a GLOBAL `.aibt-theme-X a { color: var(--accent) }` rule.
   Every footer variant (14/14) paints the always-dark --background-dark surface,
   so any bare <a> a variant leaves to inheritance gets the theme accent instead —
   and on dark/wine/rose accents that is ~1.4:1 invisible (caught by the
   re-pointed QC-lighthouse on fine-dining@wine-burgundy-luxe + beauty-salon@
   peach-cloud-soft, 2026-06-11; law-firm@white-azure passed only because
   white-azure's anchor rule sets no color). This floor out-specifies the theme
   rule — body.aibt-universal + :where() + a = (0,1,2) vs theme (0,1,1) — while
   :where() keeps it BELOW every variant's own link rules (0,3,1+), so footers
   that style their links explicitly are untouched. Hover tints the accent
   toward white (the established safe on-dark pattern), never raw accent. */
body.aibt-universal :where(.universal-footer) a {
	color: var(--text-on-dark, #FFFFFF);
}
body.aibt-universal :where(.universal-footer) a:hover,
body.aibt-universal :where(.universal-footer) a:focus-visible {
	color: color-mix(in srgb, var(--accent) 55%, var(--on-dark, #FFFFFF));
}