/*
 * Peptilab — Design Tokens
 * Single source of truth for all CSS custom properties.
 * Loaded globally on every page.
 */

:root {

	/* ── Typography ─────────────────────────────────────────── */
	--pl-font-body:    'Inter', sans-serif;
	--pl-font-heading: 'Switzer', sans-serif;

	/* ── Brand colors ──────────────────────────────────────── */
	--pl-accent:          #537FF4;
	--pl-accent-dark:     #3560D3;
	--pl-accent-shadow:   rgba(0,188,212,.35);
	--pl-accent-subtle:   rgba(0,188,212,.12);
	--pl-soft-lime:       #F0F8D9;
	--pl-white:           #ffffff;

	/* ── Dark / header / sidebar ───────────────────────────── */
	--pl-dark:            #0d1b2a;   /* header bg = sidebar bg */
	--pl-dark-border:     rgba(255,255,255,.07);
	--pl-dark-muted:      #8A94A6;
	--pl-dark-secondary:  rgba(255,255,255,.65);

	/* ── Text ──────────────────────────────────────────────── */
	--pl-text:            #1a1a1a;
	--pl-text-secondary:  #4a5568;
	--pl-muted:           #6b7c93;
	--pl-text-faint:      #9eaab8;

	/* ── Backgrounds ───────────────────────────────────────── */
	--pl-bg-page:         #f4f6f9;
	--pl-bg-card:         #E7EAEF;
	--pl-bg-subtle:       #f0f4f8;
	--pl-bg-hover:        #f4f7fb;

	/* ── Borders ───────────────────────────────────────────── */
	--pl-border:          #e8ecf2;
	--pl-border-light:    #eef0f4;
	--pl-border-radius:    32px;

	/* ── State colors ──────────────────────────────────────── */
	--pl-sale:            #e53935;

	/* ── Radius ────────────────────────────────────────────── */
	--pl-radius-sm:       6px;
	--pl-radius:          14px;
	--pl-radius-lg:       20px;
	--pl-radius-pill:     50px;

	/* ── Sidebar (shop) ─────────────────────────────────────── */
	--pl-sidebar-width:   240px;

	/* ── Shadows ───────────────────────────────────────────── */
	--pl-shadow:          0 2px 12px rgba(0,0,0,.08);
	--pl-shadow-hover:    0 10px 30px rgba(0,0,0,.12);
	--pl-shadow-card-atc: 0 4px 14px var(--pl-accent-shadow);

	/* ── Motion ─────────────────────────────────────────────── */
	--pl-transition:      .22s ease;
	--pl-transition-fast: .15s ease;

}

mark {
	background: transparent;
}

/* ============================================================
   Global typography
   ============================================================ */
h1 , .h1{
	font-family:    var( --pl-font-heading );
	font-size:      88px !important;
	font-weight:    500;
	line-height:    1.11 !important;
	letter-spacing: 0;
	margin:         0;
}

h2, .h2 {
	font-family:    var( --pl-font-heading );
	font-size:      40px !important;
	font-weight:    500;
	line-height:    calc( 48 / 40 ) !important;
	letter-spacing: -.3px;
	margin:         0;
}

h3, .h3 {
	font-family:    var( --pl-font-heading );
	font-size:      28px;
	font-weight:    500;
	line-height:    calc( 32 / 28 );
	letter-spacing: 0;
	margin:         0;
}

p, .text {
	font-size:   18px;
	line-height: 1.556;
	margin:      0;
}

/* ── Mobile typography (≤1024px) ── */
@media ( max-width: 1024px ) {
	h1, .h1 {
		font-size:   36px !important;
		line-height: calc( 48 / 36 ) !important;
	}

	h2, .h2 {
		font-size:   24px !important;
		line-height: calc( 32 / 24 ) !important;
	}

	h3, .h3 {
		font-size:   20px;
		line-height: calc( 32 / 20 );
	}
}