/*
Theme Name:     Black Ivy
Theme URI:
Description:    Theme for the Black Ivy site. Colours, fonts and logos come from the Elementor kit and Site Identity; venue details come from the theme's own Site Settings page.
Author:         Inside & Out Digital
Author URI:     https://www.insideandout.co.uk
Template:       hello-elementor
Version:        0.1.0
Text Domain:    black-ivy
*/

/*
 * Design tokens.
 *
 * Colours come from Elementor Variables, created per venue by the Venue Setup
 * installer. Variables are keyed by *label*, not by a generated id, so every
 * venue emits the same custom property names with its own values — which is
 * what lets one stylesheet skin 25 venues. Fonts still come from the kit's
 * system typography, whose ids are hardcoded in core and so are equally stable.
 *
 * Nothing here holds a venue-specific value.
 *
 * Use the --bi-color-* / --bi-font-* aliases in theme CSS rather than the raw
 * names, so the Elementor coupling stays in this one block. If the Variables
 * feature changes shape — it is still flagged alpha — this is the only place
 * that needs to move.
 *
 * The fallbacks are the previous system-colour tokens, so a venue whose
 * Variables have not been created yet renders in kit colours instead of
 * unstyled.
 */
/*
 * Declared on body, not :root, and it has to stay that way.
 *
 * Elementor scopes its kit variables to .elementor-kit-<id>, which is a class
 * on <body>. A custom property is resolved against the element it is declared
 * on, so a token declared at :root — the <html> element — cannot see them: the
 * var() has nothing to resolve, the declaration becomes invalid, and the token
 * reads as undefined rather than falling back.
 *
 * body sits at the same level as the kit class and still inherits the :root
 * variables that the Elementor Variables module emits, so it can see both.
 */
body {
	--bi-color-brand:    var(--bi-brand, var(--e-global-color-primary));
	/*
	 * Body copy reads bi-text-dark first.
	 *
	 * That variable is the one the design names as the default text colour, so it is the one to
	 * change when the text colour changes. bi-ink stays behind it as the fallback it always was,
	 * and Elementor's own text global behind that, so a venue that has never been given either
	 * still renders.
	 */
	--bi-color-text:     var(--bi-text-dark, var(--bi-ink, var(--e-global-color-text)));
	--bi-color-contrast: var(--bi-ink, var(--e-global-color-secondary));

	/*
	 * The bar is its own surface, not the page's.
	 *
	 * It read bi-surface, which is #FDF9F6 — the surface a page sits on. The design gives the
	 * header, and the panels that fill with it, #FFFAF7: a shade lighter, so a filled bar reads as
	 * sitting above the page rather than as more of it. The same reasoning as the utility strip
	 * below, which was pulled out of the tint for the same kind of reason.
	 *
	 * bi-bar-surface in front, so a venue can still be given one of its own in the kit.
	 */
	--bi-surface-bar:     var(--bi-bar-surface, #fffaf7);
	--bi-surface-panel:   var(--bi-surface, #fff);
	/*
	 * The utility strip has a variable of its own rather than sharing the tint.
	 *
	 * bi-surface-tint is also the action bar, the datepicker and the featured block, so setting
	 * the strip's colour through it turned three unrelated components dark green too. The fallback
	 * chain is kept behind the new token, so a venue that has not been given one still renders the
	 * way it did before.
	 */
	--bi-surface-utility: var(--bi-utility-surface, var(--bi-surface-tint, var(--e-global-color-primary)));
	--bi-rule:            var(--bi-rule-color, #dcd5d0);

	/*
	 * Families and weights both come from the kit, so a font chosen in
	 * Elementor > Site Settings > Global Fonts reaches the header without any
	 * theme change. Weight matters as much as family here: P22 Mackinac is
	 * licensed at 400 only, and a heading asking for 600 would be given a
	 * browser-synthesised bold.
	 *
	 * Each carries a generic fallback so a failed webfont degrades to the right
	 * kind of face rather than to the browser default.
	 */
	--bi-font-heading:        var(--e-global-typography-primary-font-family), Georgia, serif;
	--bi-font-heading-weight: var(--e-global-typography-primary-font-weight, 400);

	--bi-font-subhead:        var(--e-global-typography-secondary-font-family), Georgia, serif;
	--bi-font-subhead-weight: var(--e-global-typography-secondary-font-weight, 400);

	--bi-font-body:           var(--e-global-typography-text-font-family), system-ui, sans-serif;
	--bi-font-body-weight:    var(--e-global-typography-text-font-weight, 400);

	--bi-font-accent:         var(--e-global-typography-accent-font-family), system-ui, sans-serif;
	--bi-font-accent-weight:  var(--e-global-typography-accent-font-weight, 500);
}