/*
Theme Name: StyleShare
Theme URI: https://styleshareapp.com
Description: Lightweight StyleShare child theme for Kadence. Holds brand tokens, custom CSS, and any template/PHP overrides for the StyleShare marketing site. Brand colors, fonts, and logo are configured in Kadence Global Settings; this file is the home for everything that needs hand-written CSS.
Author: App Magic
Author URI: https://appmagic.co
Template: kadence
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: styleshare
*/

/* ==========================================================================
   Brand tokens
   Source of truth for the page builder is the Kadence Global Palette
   (Customize > Colors). These variables mirror those hex values so custom
   CSS below can reference brand colors by name. Keep the two in sync.
   ========================================================================== */
:root {
  --ss-pink:        #E86AA3; /* primary brand pink */
  --ss-pink-bright: #FF4DA6; /* high-energy accent */
  --ss-pink-deep:   #D45A91; /* button gradient end / hover */
  --ss-ochre:       #F5C16C; /* warm secondary accent */
  --ss-purple:      #4361EE; /* bluish-purple accent */
  --ss-offwhite:    #F5EDE5; /* section / page background */
  --ss-dark:        #2A2A2A; /* primary text */
  --ss-gray:        #4E4E4E; /* secondary text */
  --ss-muted:       #6B6B6B; /* muted text */
  --ss-white:       #FFFFFF;

  --ss-radius:      18px;
  --ss-cta-gradient: linear-gradient(135deg, var(--ss-pink) 0%, var(--ss-pink-deep) 100%);
}

/* ==========================================================================
   Custom styling
   Add site-specific CSS below as we build pages. Kept intentionally minimal
   for now: a reusable gradient CTA treatment matching the app's button style.
   ========================================================================== */

/* Gradient CTA — apply by adding the class "ss-cta" to a Kadence button. */
.ss-cta .kb-button,
.wp-block-button.ss-cta .wp-block-button__link {
  background: var(--ss-cta-gradient);
  border: none;
  font-style: italic;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(232, 106, 163, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ss-cta .kb-button:hover,
.wp-block-button.ss-cta .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(232, 106, 163, 0.45);
}