/* =============================================================================
   Bogdánbor Child — Global Typography System
   Central design tokens, base styles, and shared utility classes.
   All per-page stylesheets depend on this file via the bogdanbor-header chain.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Design Tokens
   ----------------------------------------------------------------------------- */
:root {
	/* ── Font stacks ── */
	--font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
	--font-ui:    'Jost', system-ui, -apple-system, sans-serif;

	/* ── Type scale ──
	   Derived from a ~1.25 modular scale anchored at 1rem.
	   clamp() values preserve optical rhythm across viewport sizes.     */
	--text-micro: 0.5625rem;                         /*  9px — micro badges, count      */
	--text-xs:    0.6875rem;                         /* 11px — category labels, eyebrows */
	--text-sm:    1rem;                           /* 12px — nav, meta, breadcrumbs    */
	--text-base:  1rem;                              /* 16px — body copy                 */
	--text-md:    1.0625rem;                         /* 17px — lead text, card titles    */
	--text-lg:    1.25rem;                           /* 20px — product title, large UI   */
	--text-xl:    1.625rem;                          /* 26px — tertiary heading          */
	--text-2xl:   clamp( 1.75rem, 3.5vw, 2.75rem ); /* section headings                 */
	--text-3xl:   clamp( 2.5rem, 5vw, 4rem );       /* page-level hero                  */
	--text-hero:  clamp( 2.75rem, 6vw, 5.5rem );    /* homepage hero                    */

	/* ── Line heights ── */
	--leading-tight:   1.15;  /* display headings  */
	--leading-snug:    1.3;   /* large sub-headings */
	--leading-normal:  1.6;   /* compact UI text   */
	--leading-relaxed: 1.85;  /* lead / body copy  */
	--leading-loose:   1.95;  /* long-form prose   */

	/* ── Letter spacing ── */
	--tracking-tight:   -0.01em; /* display serif at large sizes */
	--tracking-normal:   0;
	--tracking-wide:     0.03em; /* serif headings               */
	--tracking-wider:    0.08em; /* serif meta / timeline years  */
	--tracking-widest:   0.16em; /* UI labels, buttons           */
	--tracking-ultra:    0.2em;  /* eyebrows, section labels     */

	/* ── Brand colours ── */
	--color-ink:    #1a1a1a;
	--color-muted:  #666;
	--color-faint:  #999;
	--color-ghost:  #ccc;
	--color-accent: #7b3b2f; /* deep wine */
	--color-warm:   #faf9f7; /* warm off-white surface */
	--color-border: rgba( 0, 0, 0, 0.06 );
}

/* -----------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------------- */
body {
	font-family:             var( --font-serif );
	font-size:               var( --text-base );
	line-height:             var( --leading-relaxed );
	color:                   var( --color-ink );
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------------------------
   Global utility — layout wrapper
   ----------------------------------------------------------------------------- */
.container {
	max-width: 1200px;
	margin:    0 auto;
	padding:   0 2rem;
}

/* -----------------------------------------------------------------------------
   Global utility — section eyebrow label
   Appears above section headings. Always UI font, always tracked caps.
   ----------------------------------------------------------------------------- */
.section-eyebrow {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
	color:          var( --color-accent );
	margin-bottom:  0.75rem;
}

/* -----------------------------------------------------------------------------
   Global utility — section heading group
   ----------------------------------------------------------------------------- */
.section-header {
	margin-bottom: 3.5rem;
}

.section-title {
	font-family:    var( --font-serif );
	font-size:      var( --text-2xl );
	font-weight:    400;
	letter-spacing: var( --tracking-wide );
	line-height:    var( --leading-tight );
	color:          var( --color-ink );
	margin:         0;
}

/* Stand-alone lead sentence below a section heading */
.section-lead {
	font-family: var( --font-serif );
	font-size:   var( --text-md );
	line-height: var( --leading-relaxed );
	color:       var( --color-muted );
	max-width:   520px;
	margin-top:  1rem;
}

/* -----------------------------------------------------------------------------
   Global utility — primary call-to-action button
   Used on homepage hero and CTA banner; may appear on other pages.
   ----------------------------------------------------------------------------- */
.btn-primary {
	display:         inline-block;
	padding:         0.875rem 2.25rem;
	background:      var( --color-ink );
	color:           #fff;
	font-family:     var( --font-ui );
	font-size:       var( --text-xs );
	font-weight:     400;
	letter-spacing:  var( --tracking-widest );
	text-transform:  uppercase;
	text-decoration: none;
	border:          1px solid var( --color-ink );
	transition:      background 0.25s ease, color 0.25s ease;
	white-space:     nowrap;
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: transparent;
	color:      var( --color-ink );
	outline:    none;
}