/* ========================================================================================
 * 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{
	--primary-color			: #0B0B38;
	--primary-rgb			: 11, 11, 56;  /* 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			: #2C2C66;
	--secondary-color		: #F8F8FF;
	--text-color			: #555574;
	--accent-color			: #5E5EEE;
	--accent-rgb			: 94, 94, 238; /* must match --accent-color #5E5EEE */
	--white-color			: #FFFFFF;
	--divider-color			: #F0F0FF;
	--dark-divider-color	: #FFFFFF26;
	--error-color			: rgb(230, 87, 87);
	--button-color			: #5E5EEE;
	--button-hover-color	: #0B0B38;
	--button-text-color		: #FFFFFF;
	/* Body font follows the admin "Body" font (Anchor Tools → Site Config → Fonts);
	   falls back to Plus Jakarta if the site-config module is unavailable. */
	--default-font			: var(--anchor-font-body, "Plus Jakarta Sans", sans-serif);
	/* Heading font follows the admin "Heading" font; falls back to the body font. */
	--heading-font			: var(--anchor-font-heading, var(--default-font));

	/* 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 (--radius-lg 40px is the dominant brand card/pill radius). */
	--radius-sm				: 10px;
	--radius-md				: 15px;
	--radius-lg				: 40px;
	--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-*). */
	--icon-eyebrow:     url("/wp-content/uploads/2026/06/logo-icon-2.png");
	--icon-plus:        url("/wp-content/uploads/2026/05/icon-plus-accent.svg");
	--icon-blockquote:  url("/wp-content/uploads/2026/05/icon-blockquote.svg");
	--icon-arrow-white: url("/wp-content/uploads/2026/05/arrow-white.svg");
	--bg-hero-shape:    url("/wp-content/uploads/2026/05/hero-bg.svg");
	--bg-hero-photo:    url("/wp-content/uploads/2026/06/hero-thumb.jpg");
	--bg-about-shape:   url("/wp-content/uploads/2026/05/about-image-bg-shape.svg");
	--bg-experience:    url("/wp-content/uploads/2026/06/about-sadc-header-p-800-crop-bvqVfq.jpg");
	--bg-expertise:     url("/wp-content/uploads/2026/05/expertise-image-bg.svg");
	--bg-why-choose:    url("/wp-content/uploads/2026/05/why-choose-us-bg.svg");
	--bg-testimonial:   url("/wp-content/uploads/2026/05/testimonial-bg.png");
	--bg-service-header:url("/wp-content/uploads/2026/06/Gilbert.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 */
	}
}