/* ========================================================================================
 * tokens.css — CORE DESIGN TOKENS (L1 layer).
 *
 * All CSS custom properties for the anchor-dental theme. This file is enqueued before
 * framework.css and is the single source of truth for color, spacing, shadow, radius,
 * and transition tokens — plus asset-URL vars so upload paths are defined once.
 *
 * Moved verbatim from framework.css (:root blocks, lines 53–117) by Phase 1 refactor.
 * Do NOT put selector rules here — tokens only.
 * ======================================================================================== */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
	/* TMJ Sleep Cleveland brand — dark green Primary, coral Accent (reskinned from the
	   anchor-dental defaults; hues sourced from the live tmj-anchor tokens.css). */
	--primary-color			: #153b37;     /* dark green — hero/heading/dark sections */
	--primary-rgb			: 21, 59, 55;  /* fallback triplet of --primary-color; the live value is derived from the admin Primary in inc/colors.php (consumed by the .page-header overlay) */
	--primary-light			: #2a635c;     /* mid green */
	--secondary-color		: #f8fafa;     /* off-white (muted section bg) */
	--text-color			: #4a5f5c;     /* muted green-gray body copy */
	--accent-color			: #e8a087;     /* coral */
	--accent-rgb			: 232, 160, 135; /* must match --accent-color #e8a087 */
	--white-color			: #FFFFFF;
	--divider-color			: #e8eeee;     /* pale green-gray divider */
	--dark-divider-color	: #FFFFFF26;
	--error-color			: rgb(230, 87, 87);
	--button-color			: #e8a087;     /* coral button */
	--button-hover-color	: #153b37;     /* dark green on hover */
	--button-text-color		: #FFFFFF;
	/* Body font follows the admin "Body" font (Anchor Tools → Site Config → Fonts);
	   falls back to the TMJ body face (Libre Franklin) if site-config is unavailable. */
	--default-font			: var(--anchor-font-body, "Libre Franklin", Helvetica, Arial, sans-serif);
	/* Heading font follows the admin "Heading" font; falls back to the TMJ display serif. */
	--heading-font			: var(--anchor-font-heading, "Cormorant Garamond", Georgia, serif);

	/* Vertical rhythm for sections (consumed by the .section utilities below and
	   by the legacy section-name rules). Retune section spacing site-wide here. */
	--section-space			: 100px; /* default top & bottom */
	--section-space-md		: 70px;  /* medium bottom step */
	--section-space-sm		: 50px;  /* compact (common mobile value) */
	--section-space-xs		: 25px;  /* tight (mobile tops/bottoms) */
	--section-space-2xs		: 20px;  /* tightest (mobile bottoms) */

	/* Shadows — --shadow-card is the 9× card shadow used across the template. */
	--shadow-card			: 0px 10px 30px 0px #00000008;
	--shadow-soft			: 0px 4px 20px 0px #0000000D;
	--shadow-strong			: 0px 10px 30px 0px #0000001A;

	/* Corner radii — TMJ uses a modest ~14px radius throughout (not the anchor-dental
	   40px pill look). --radius-md 14px is the dominant brand card radius. */
	--radius-sm				: 10px;
	--radius-md				: 14px;
	--radius-lg				: 18px;
	--radius-circle			: 50%;
	--radius-pill			: 9999px;

	/* Transition durations. */
	--transition-base		: 0.3s;
	--transition-medium		: 0.4s;
	--transition-slow		: 0.5s;

	/* Asset URLs — single source of truth for all upload-path references in framework.css
	   and custom.css. Defined once here; consumed via var(--icon-*) / var(--bg-*).
	   Repointed at TMJ upload assets (all verified present in this install's uploads).
	   NOTE: primitives.css consumes NONE of these — they feed the L3 skin only, so several
	   are provisional placeholders (TMJ-ICON / BG-DIAMOND) pending the TMJ L3 skin rewrite. */
	--icon-eyebrow:     url("/wp-content/uploads/2026/01/TMJ-ICON.svg");
	--icon-plus:        url("/wp-content/uploads/2026/01/TMJ-ICON.svg");
	--icon-blockquote:  url("/wp-content/uploads/2026/01/TMJ-ICON.svg");
	--icon-arrow-white: url("/wp-content/uploads/2026/01/TMJ-ICON.svg");
	--bg-hero-shape:    url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp");
	--bg-hero-photo:    url("/wp-content/uploads/2026/05/Cleveland-Hero-1.avif");
	--bg-about-shape:   url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp");
	--bg-experience:    url("/wp-content/uploads/2026/05/Cleveland-Hero-1.avif");
	--bg-expertise:     url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp");
	--bg-why-choose:    url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp");
	--bg-testimonial:   url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp");
	--bg-service-header:url("/wp-content/uploads/2026/05/Cleveland-Hero-1.avif");

	/* Type-scale tokens — consumed by primitives.css and any rule that needs a
	   named size rather than a hard-coded px value. */
	--fs-eyebrow:     14px;
	--fs-subtitle:    20px;
	--fs-subtitle-sm: 18px;
	--fs-title:       46px;
	--fs-display:     54px;
}

/* ----------------------------------------------------------------------------------------
   RESPONSIVE SPACING — shrink the section-space scale at the theme's 991px breakpoint.
   Because every section-name padding rule (and the .section utilities) consume these
   tokens, this single override drives the mobile vertical rhythm for the whole site —
   theme pages AND Anchor blocks. Retune mobile spacing here. Verified to reproduce the
   previous hand-tuned per-section mobile padding exactly (the lone outlier, .our-doctors,
   keeps a literal override in the 991 block below).
   Desktop values are unchanged, so desktop rendering is identical.
   ---------------------------------------------------------------------------------------- */
@media (max-width: 991px){
	:root{
		--section-space    : 50px;  /* desktop 100 */
		--section-space-md : 20px;  /* desktop 70  */
		--section-space-sm : 25px;  /* desktop 50  */
		--section-space-2xs: 0;     /* desktop 20  */
		/* --section-space-xs stays 25px — only the new .section--*-xs modifiers consume it */
	}
}