/*
Theme Name: Symbiotic Peptides
Theme URI: https://symbioticpeptides.com/
Author: Symbiotic Peptides
Author URI: https://symbioticpeptides.com/
Description: Child theme of Kadence for Symbiotic Peptides. Brand palette: Symbiotic Orange (#E8620A), Black (#000000), White (#FFFFFF).
Template: kadence
Version: 1.18.3
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: symbiotic-peptides
Requires at least: 6.3
Requires PHP: 7.4
Tags: custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready, e-commerce
*/

/* Space Grotesk is enqueued in inc/enqueue.php (and inc/setup.php for the editor). */

/* ==========================================================================
   1. Brand tokens & Global Typography
   --------------------------------------------------------------------------
   The live palette is driven by Kadence (Customizer > Colors), whose defaults
   this child theme sets in functions.php. These aliases are for custom CSS so
   brand hexes are never hardcoded twice.

   Contrast notes (WCAG AA):
     #E8620A on #FFFFFF ....... 3.4:1  -> large text / UI only, NOT body copy
     #E8620A on #000000 ....... 6.1:1  -> pass
     #000000 on #E8620A ....... 6.1:1  -> pass (preferred button text)
     #FFFFFF on #E8620A ....... 3.4:1  -> large text only (18px bold / 24px+)
     #BE5008 on #FFFFFF ....... 4.8:1  -> pass, use for orange text on white
   ========================================================================== */

:root {
	--sp-orange: #e8620a;
	--sp-orange-dark: #be5008; /* accessible orange for text on white */
	--sp-orange-tint: rgba( 232, 98, 10, 0.08 );
	--sp-black: #000000;
	--sp-white: #ffffff;

	/* Global Font Overrides: Space Grotesk */
	--global-body-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--global-heading-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--global-primary-nav-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--global-secondary-nav-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--global-buttons-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--global-button-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sp-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Hard-enforce Space Grotesk across the entire site */
html, body,
h1, h2, h3, h4, h5, h6,
.site-title, .site-description,
input, button, select, textarea, optgroup,
p, a, span, div, li, blockquote, figcaption, table, th, td, label, legend, code, pre,
.entry-title, .entry-content, .widget-title, .nav-links,
.sp-header, .sp-menu, .sp-cta, .sp-action,
.button, .wp-block-button__link,
.woocommerce, .woocommerce-page, .woocommerce *,
.editor-styles-wrapper, .editor-styles-wrapper * {
	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* ==========================================================================
   2. Brand accents
   ========================================================================== */

::selection {
	background-color: var( --sp-orange );
	color: var( --sp-white );
}

/* Visible, on-brand keyboard focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var( --sp-orange );
	outline-offset: 2px;
}

/* ==========================================================================
   3. Site customizations
   --------------------------------------------------------------------------
   Add project CSS below. Reference Kadence globals so the Customizer stays in
   control: var(--global-palette1) ... var(--global-palette9).
   ========================================================================== */

/* Home page anchors (/#faq, /#quality ...) land below the sticky header. */
.sp-research-areas,
.sp-collection,
.sp-qa,
.sp-traceability,
.sp-faq {
	scroll-margin-top: var( --sp-header-height, 78px );
}

/* ==========================================================================
   4. Optional: hard-lock the palette
   --------------------------------------------------------------------------
   Uncomment only if the palette must never be editable in the Customizer.
   This wins over Kadence's dynamic CSS and will make Customizer color changes
   appear to do nothing.

:root {
	--global-palette1: #e8620a;
	--global-palette2: #be5008;
	--global-palette3: #000000;
	--global-palette4: #1a1a1a;
	--global-palette5: #333333;
	--global-palette6: #6b6b6b;
	--global-palette7: #e2e2e2;
	--global-palette8: #f5f5f5;
	--global-palette9: #ffffff;
}
   ========================================================================== */