/* =========================================================================
 * Collective Code Widgets — Design Tokens
 * -------------------------------------------------------------------------
 * Single source of truth for the whole plugin. Every widget references these
 * custom properties — never hard-coded values — so the entire brand can be
 * retuned from this one file.
 *
 * Brand: "The Collective Code" — feminine LUXURY: romantic rose-pink + rich
 * antique gold throughout (per client). Soft blush surfaces, gilded accents,
 * refined serif/script type. Canary & royal kept defined but no longer used.
 * ===================================================================== */

:root,
.ccw {

	/* ---------------------------------------------------------------------
	 *  Brand palette (exact client hexes)
	 * ------------------------------------------------------------------ */
	--ccw-rose:          #EC74A8; /* Rose Pink  — dominant brand colour     */
	--ccw-blush:         #FCDCE8; /* Blush Pink — soft section backgrounds  */
	--ccw-canary:        #FFD60A; /* Canary Yellow — legacy accent (unused) */
	--ccw-gold:          #C9A24B; /* Rich antique gold — luxury accent      */
	--ccw-royal:         #1E3A8A; /* Royal Blue — limited trust accent      */

	/* Derived shades for state + accessibility ------------------------- */
	--ccw-rose-soft:     #FBE3EC; /* tint for hovers / chips                */
	--ccw-rose-deep:     #C0397A; /* button bg — white text passes WCAG AA  */
	--ccw-rose-strong:   #A32E66; /* button hover / active                  */
	--ccw-gold-soft:     #E6CD8A; /* champagne gold                         */
	--ccw-gold-deep:     #A8842F; /* deep gold — gold text on light         */
	--ccw-canary-deep:   #E6B800; /* darker canary for text-on-light        */

	/* ---------------------------------------------------------------------
	 *  Semantic colour roles (widgets reference THESE)
	 * ------------------------------------------------------------------ */
	--ccw-primary:        var(--ccw-rose);
	--ccw-primary-hover:  var(--ccw-rose-strong);
	--ccw-primary-cta:    var(--ccw-rose-deep);   /* accessible filled btn  */
	--ccw-accent:         var(--ccw-gold);   /* gold is the luxury accent */
	--ccw-highlight:      var(--ccw-gold);
	--ccw-info:           var(--ccw-royal);

	/* ---------------------------------------------------------------------
	 *  Surfaces & backgrounds
	 * ------------------------------------------------------------------ */
	--ccw-bg:             #FFF9FC; /* soft blush-white — page base          */
	--ccw-bg-soft:        #FFF4F8; /* blush-tinted alt section              */
	--ccw-bg-blush:       #FFEAF3; /* stronger blush band                   */
	--ccw-surface:        #FFFFFF; /* cards                                 */
	--ccw-surface-dark:   #2A1E2C; /* deep plum — dark footer / overlays    */
	--ccw-border:         #F4DCE8; /* soft rose-tinted hairline             */
	--ccw-border-strong:  #EBC6D8;

	/* Signature soft gradients (modern, not busy) ---------------------- */
	--ccw-grad-blush:   linear-gradient(135deg, #FFF4F8 0%, #FBE3EC 100%);
	--ccw-grad-rose:    linear-gradient(135deg, #F2A6C8 0%, #EC74A8 55%, #C0397A 100%);
	--ccw-grad-gold:    linear-gradient(135deg, #EBD49A 0%, #C9A24B 55%, #A8842F 100%);
	--ccw-grad-rosegold: linear-gradient(135deg, #EC74A8 0%, #D98FA0 45%, #C9A24B 100%);
	--ccw-grad-hero:    linear-gradient(120deg, #FFFAFC 0%, #FCE6F0 55%, #FCDCE8 100%);

	/* ---------------------------------------------------------------------
	 *  Text
	 * ------------------------------------------------------------------ */
	--ccw-heading:        #2A1E2C; /* deep plum-charcoal                    */
	--ccw-text:           #4A3F49; /* warm body grey                        */
	--ccw-text-muted:     #8A7E88;
	--ccw-on-primary:     #FFFFFF;
	--ccw-on-dark:        #FBEFF5;

	/* ---------------------------------------------------------------------
	 *  Typography
	 *  (Defaults only — Elementor typography controls override per widget.
	 *   Recommended Google Fonts: Playfair Display, Poppins, Dancing Script.)
	 * ------------------------------------------------------------------ */
	--ccw-font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--ccw-font-script:  "Dancing Script", "Great Vibes", "Brush Script MT", cursive;
	--ccw-font-body:    "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--ccw-fs-display:   clamp(2.6rem, 5vw, 4.25rem);
	--ccw-fs-h1:        clamp(2.1rem, 4vw, 3.25rem);
	--ccw-fs-h2:        clamp(1.7rem, 3vw, 2.5rem);
	--ccw-fs-h3:        clamp(1.35rem, 2.2vw, 1.75rem);
	--ccw-fs-lead:      clamp(1.05rem, 1.4vw, 1.25rem);
	--ccw-fs-body:      1rem;
	--ccw-fs-small:     0.875rem;
	--ccw-fs-eyebrow:   0.78rem;

	--ccw-lh-tight:     1.15;
	--ccw-lh-snug:      1.35;
	--ccw-lh-body:      1.7;
	--ccw-tracking-eyebrow: 0.18em;

	/* ---------------------------------------------------------------------
	 *  Spacing — strict 8px system
	 * ------------------------------------------------------------------ */
	--ccw-space-1:  8px;
	--ccw-space-2:  16px;
	--ccw-space-3:  24px;
	--ccw-space-4:  32px;
	--ccw-space-5:  40px;
	--ccw-space-6:  48px;
	--ccw-space-8:  64px;
	--ccw-space-10: 80px;
	--ccw-space-12: 96px;

	--ccw-container:        1200px;
	--ccw-container-narrow: 820px;
	--ccw-gutter:           clamp(16px, 4vw, 40px);

	/* ---------------------------------------------------------------------
	 *  Radius
	 * ------------------------------------------------------------------ */
	--ccw-radius-xs:   8px;
	--ccw-radius-sm:   12px;
	--ccw-radius-md:   18px;
	--ccw-radius-lg:   28px;
	--ccw-radius-pill: 999px;

	/* ---------------------------------------------------------------------
	 *  Elevation (soft, rose-tinted depth)
	 * ------------------------------------------------------------------ */
	--ccw-shadow-xs:  0 1px 2px rgba(42, 30, 44, 0.06);
	--ccw-shadow-sm:  0 4px 14px rgba(192, 57, 122, 0.08);
	--ccw-shadow-md:  0 10px 30px rgba(192, 57, 122, 0.12);
	--ccw-shadow-lg:  0 24px 60px rgba(42, 30, 44, 0.16);
	--ccw-ring:       0 0 0 3px rgba(236, 116, 168, 0.35);

	/* ---------------------------------------------------------------------
	 *  Motion
	 * ------------------------------------------------------------------ */
	--ccw-transition:      all 0.3s ease;
	--ccw-transition-fast: all 0.18s ease;
	--ccw-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);

	/* ---------------------------------------------------------------------
	 *  Z-index scale
	 * ------------------------------------------------------------------ */
	--ccw-z-header:     1000;
	--ccw-z-overlay:    1090;
	--ccw-z-offcanvas:  1100;
}

/* Respect reduced-motion preferences globally for the plugin. */
@media (prefers-reduced-motion: reduce) {
	.ccw, .ccw * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}