/* ========================================================================================
 * 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{
	/* SOC navy — the dark brand color. The previous #153b37 deep green read as a
	   different (TMJ) practice's brand, so the whole dark ramp is navy now.
	   #FFFFFF on #0d2440 = 15.63:1. This navy specifically was chosen because the
	   accent --accent-color #059e9c still measures 4.75:1 on it (PASS AA NORMAL);
	   on lighter navies that accent drops to large-text-only and breaks the small
	   accent text in the footer and the dark bands. Do not swap in another navy
	   without re-measuring that pairing with bin/contrast.py. */
	--primary-color			: #0d2440;   /* SOC navy */
	--primary-rgb			: 13, 36, 64;
	--primary-light			: #1e3f6b;   /* lighter navy, gradient 2nd stop (#FFF = 10.61:1) */
	--primary-deep			: #081829;   /* final-CTA background (#FFF = 17.90:1) */
	--footer-bg				: #081829;   /* footer background */
	--ink					: #111820;   /* gallery bg / base body ink (navy-black) */
	--secondary-color		: #F7F9FC;   /* cool near-white page background */
	--text-color			: #4E5560;   /* 7.52:1 on white, 7.13:1 on --secondary-color */
	--text-muted			: #6A7280;   /* 4.72:1 on white, 4.60:1 on --secondary-color */
	/* SOC teal — the base design color. Orange is retired; this replaces every
	   former orange use (fills, rules, icons, large display type, decoration).
	   #059e9c on #FFFFFF measures 3.29:1 — LARGE TEXT ONLY. Never put small
	   text in it; use --accent-ink below for that. */
	--accent-color			: #059e9c;   /* SOC teal (accent / base design color) */
	--accent-rgb			: 5, 158, 156;
	/* Text-safe accent. #04807e on #FFFFFF = 4.78:1 PASS(AA normal). Use this
	   for any small accent-colored text — eyebrows, links, captions.
	   On the cool near-white --secondary-color (#F7F9FC) it measures 4.53:1,
	   which now also PASSES — the old warm ivory #F5F3EF was only 4.31:1 and
	   FAILED, which is why the hero copy panel was forced to pure white. */
	--accent-ink			: #04807e;   /* SOC teal, small-text safe */
	--white-color			: #FFFFFF;
	--divider-color			: rgba(13,36,64,.12);
	--divider-strong		: rgba(13,36,64,.22);
	--dark-divider-color	: rgba(255,255,255,.12);
	--on-dark				: #DDE4EE;   /* 12.21:1 on --primary-color, 13.99:1 on --primary-deep */
	--on-dark-muted			: #A5B3C6;   /* 7.34:1 on --primary-color, 8.41:1 on --primary-deep */
	/* Accent that has to read ON the dark navy bands. #10c3cc on #0d2440 =
	   7.22:1 and on --primary-deep #081829 = 8.27:1 — both PASS AA normal
	   (both improved over the old green ramp). */
	--on-dark-accent		: #10c3cc;
	--surface-input			: #F7F8FA;
	--error-color			: rgb(230, 87, 87);
	/* Buttons. The client-specified resting fill is a LIGHT sky blue, so it takes
	   DARK ink: #FFFFFF on #10c3cc is 2.16:1 and fails badly, while the navy
	   #0d2440 on #10c3cc is 7.22:1 and passes comfortably (the old green ink was
	   only 5.66:1). The hover fill is dark enough for white ink
	   (#FFFFFF on #04807e = 4.78:1), so the ink flips on hover — see the
	   --btn-* block in classy-dental/assets/css/classy-dental.css. */
	--button-color			: #10c3cc;   /* sky blue, resting fill */
	--button-hover-color	: #04807e;   /* darker teal, hover fill */
	--button-text-color		: #0d2440;   /* navy ink on the resting fill */
	/* Brand fonts — SINGLE SOURCE OF TRUTH. Set the family here; the files are
	   loaded by the `ac-gfonts` Google Fonts enqueue in inc/enqueue.php (which
	   carries the heavy weights this design needs — Raleway 800/900). Declared
	   directly (NOT via --anchor-font-*) so the admin Site Config Fonts values do
	   not override the brand: Site Config can only load weights 400;600, so it
	   cannot serve the heading weights. To change a brand font, edit this line
	   AND the matching family/weights in the inc/enqueue.php `ac-gfonts` URL. */
	--default-font			: "Source Sans 3", system-ui, sans-serif;
	--heading-font			: "Raleway", sans-serif;
	--mono-font				: "Space Mono", ui-monospace, monospace;

	/* 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			: 104px; /* 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				: 0;
	--radius-md				: 0;
	--radius-lg				: 0;
	--radius-soft			: 8px;     /* optional rounded mode; unused in v1 */
	--radius-circle			: 50%;
	--radius-pill			: 9999px;  /* glass nav */

	/* 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-*).
	   These pointed at the SOURCE practice's (Princeton) uploads/2026/05 + /2026/06
	   directories, which do not exist on this site — every url() 404'd. The eight
	   pure-decoration ones below are repointed at this theme's own bundled copies
	   in assets/images/ (relative to this file, so `../images/…` resolves correctly
	   since tokens.css is enqueued as a real stylesheet, not inlined). That also
	   makes the theme self-contained rather than dependent on a media library that
	   differs per site. */
	--icon-plus:        url("../images/icon-plus-accent.svg");
	--icon-blockquote:  url("../images/icon-blockquote.svg");
	--icon-arrow-white: url("../images/arrow-white.svg");
	--bg-hero-shape:    url("../images/hero-bg.svg");
	--bg-about-shape:   url("../images/about-image-bg-shape.svg");
	--bg-expertise:     url("../images/expertise-image-bg.svg");
	--bg-why-choose:    url("../images/why-choose-us-bg.svg");
	--bg-testimonial:   url("../images/testimonial-bg.png");

	/* The remaining four were the SOURCE PRACTICE'S content photos, not theme
	   decoration — copying them over would put another practice's logo mark and
	   imagery on this site, and there is no confirmed genuine Smiles of Cary
	   substitute in the media library for any of them (see functions.php-adjacent
	   report for the reasoning). Each is neutralized to `none` rather than
	   guessed at:
	     --icon-eyebrow      was Princeton's logo mark (logo-icon-2.png) used as a
	                          decorative eyebrow bullet — has no SOC equivalent.
	     --bg-hero-photo, --bg-experience, --bg-service-header were background
	                          photos for framework.css's `.hero.bg-image`,
	                          `.page-header` and the service-page header override —
	                          all three selectors are dead on this site: classy-dental's
	                          page.php / single-service.php deliberately render raw
	                          content and never enqueue template-page.php,
	                          template-page-wide.php, template-category.php or
	                          template-service.php, so none of these rules currently
	                          match anything in the DOM. Each already pairs with a
	                          radial-gradient/color overlay built from --primary-rgb,
	                          so `none` degrades cleanly to that token color instead
	                          of a broken image request. */
	--icon-eyebrow:      none;
	--bg-hero-photo:     none;
	--bg-experience:     none;
	--bg-service-header: none;

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

/* ----------------------------------------------------------------------------------------
   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    : 64px;  /* desktop 104 */
		--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 */
	}
}