/* ==========================================================================
   01-tokens.css — Steele Dermatology (AQUA) design tokens
   --------------------------------------------------------------------------
   Single source of truth for color palette, typography, and spacing variables.

   Uncode palette IDs sourced from Theme Options > Colors.
   Font IDs sourced from Theme Options > Typography.
   ========================================================================== */

:root {
	/* ── Uncode palette (canonical) ──────────────────────────────────────── */
	--uncode-palette-color-jevc:   #000000; /* SD Black */
	--uncode-palette-color-354612: #080808; /* SD Near Black */
	--uncode-palette-color-115325: #464645; /* SD Charcoal (primary accent) */
	--uncode-palette-color-611549: #FAFAFA; /* SD Off White */
	--uncode-palette-color-xsdn:   #FFFFFF; /* SD White */
	--uncode-palette-color-663086: #DED9D4; /* SD Cream */
	--uncode-palette-color-126532: #C3D7E4; /* SD Blue Accent */
	--uncode-palette-color-194692: #D7C8AA; /* SD Beige Accent */

	/* ── AQUA semantic aliases (point at the canonical Uncode palette) ──── */
	--aqua-black:         var(--uncode-palette-color-jevc);
	--aqua-near-black:    var(--uncode-palette-color-354612);
	--aqua-charcoal:      var(--uncode-palette-color-115325);
	--aqua-off-white:     var(--uncode-palette-color-611549);
	--aqua-white:         var(--uncode-palette-color-xsdn);
	--aqua-cream:         var(--uncode-palette-color-663086);
	--aqua-blue-accent:   var(--uncode-palette-color-126532);
	--aqua-beige-accent:  var(--uncode-palette-color-194692);

	/* ── Extended palette ────────────────────────────────────────────────── */
	--aqua-gray-text:     #4a4845; /* Figma secondary body */
	--aqua-muted-gray:    #C2C2C2;

	/* ── Text roles ──────────────────────────────────────────────────────── */
	--aqua-text-primary:   var(--aqua-near-black);   /* #080808 */
	--aqua-text-secondary: var(--aqua-gray-text);    /* #4a4845 */
	--aqua-text-muted:     #666666;                  /* disclaimers, meta, filters */
	--aqua-text-subdued:   #333333;                  /* facet/search UI copy */
	--aqua-text-inverse:   var(--aqua-white);
	--aqua-text-accent:    var(--aqua-charcoal);     /* #464645 — labels/UI, not body */

	/* ── Border tints ─────────────────────────────────────────────────────── */
	--aqua-border-dark:   rgba(0, 0, 0, 0.20);
	--aqua-border-light:  rgba(255, 255, 255, 0.20);

	/* ── Section spacing ──────────────────────────────────────────────────── */
	--aqua-px:            116px;  /* horizontal page padding */
	--aqua-py:            120px;  /* vertical section padding */

	/* ── Typography: Uncode font IDs ──────────────────────────────────────── */
	--aqua-font-display:    'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;       /* font-572863 */
	--aqua-font-body:       'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;     /* font-516778 */
	--aqua-font-supporting: 'Montserrat', 'Open Sans', sans-serif;                           /* font-195394 */
	--aqua-font-condensed:  'Barlow Condensed', 'Open Sans', sans-serif;                     /* font-847449 */
}