/* =============================================================================
   FLORICO DESIGN — DESIGN TOKENS  (single source of truth)
   -----------------------------------------------------------------------------
   This file is the brand control panel. Change values HERE and the whole site
   updates. Everything else references these variables — avoid hard-coded
   colors/sizes elsewhere.

   ⚠ TODO (Florico to confirm exact brand values — currently placeholders):
     • --color-brand*  : replace with Florico's exact brand hex
     • --font-heading / --font-body : replace with Florico's licensed fonts
       (and update the Google Fonts URL in inc/enqueue.php)
     • logo: upload via Appearance → Customize → Site Identity (custom-logo)
   ============================================================================= */

:root {
	/* ---- Brand palette (CONFIRMED — Florico Design 2026) ---- */
	/* Primary: Deep navy from logo + hero sections                */
	/* Accent:  Warm gold/brass — CTAs, highlights, accents        */
	--color-brand:        #C8953B; /* Florico gold/brass — primary CTA + accent */
	--color-brand-dark:   #a37828; /* darker gold for hover states              */
	--color-brand-light:  #deb96a; /* lighter gold for subtle highlights        */
	--color-brand-tint:   #fdf6ec; /* faint gold wash for sections              */

	/* Primary dark — deep navy (hero bg, headers, footer, CTA sections) */
	--color-ink-hero:     #1E2A38; /* Florico navy — confirmed from live site   */
	--color-ink-hero-soft:#253345; /* slightly lighter navy variant             */

	/* ---- Ink & neutrals ---- */
	--color-ink:          #1E2A38; /* primary text — Florico navy               */
	--color-ink-soft:     #3a4a5c; /* softer navy for body text                 */
	--color-muted:        #6b7280; /* secondary text / captions                 */
	--color-line:         #e5e1da; /* borders / dividers                        */
	--color-surface:      #F8F5F0; /* Florico warm off-white — confirmed        */
	--color-surface-2:    #efece6; /* slightly deeper warm surface              */
	--color-bg:           #ffffff;
	--color-ink-invert:   #F8F5F0; /* text on dark navy sections                */

	/* ---- Feedback ---- */
	--color-success:      #2e7d52;
	--color-error:        #c0392b;
	--color-info:         #2b6cb0;
	--color-sale:         #b23b2e; /* price strike / sale flag */

	/* ---- Typography (CONFIRMED from live floricodesign.com) ---- */
	/* Headings: Montserrat — confirmed from Elementor inline styles */
	/* Body:     Inter — clean, readable, widely used                */
	--font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--fs-300: 0.8125rem;  /* 13px small */
	--fs-400: 1rem;       /* 16px body */
	--fs-500: 1.125rem;   /* 18px lead */
	--fs-600: 1.375rem;   /* 22px h4 */
	--fs-700: 1.75rem;    /* 28px h3 */
	--fs-800: 2.25rem;    /* 36px h2 */
	--fs-900: clamp(2.5rem, 1.6rem + 3.2vw, 3.75rem); /* hero h1, fluid */

	--lh-tight: 1.15;
	--lh-snug:  1.3;
	--lh-base:  1.65;

	--fw-regular: 400;
	--fw-medium:  500;
	--fw-semi:    600;
	--fw-bold:    700;

	--ls-caps: 0.08em; /* eyebrow / uppercase labels */

	/* ---- Spacing scale (8px base) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;
	--section-y: clamp(3rem, 2rem + 4vw, 5.5rem); /* vertical rhythm between sections */

	/* ---- Layout ---- */
	--container:      1200px;
	--container-wide: 1400px;
	--container-narrow: 760px;
	--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

	/* ---- Radius / shadow / motion ---- */
	--radius-sm: 4px;
	--radius:    8px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(26,26,26,.06), 0 1px 3px rgba(26,26,26,.08);
	--shadow:    0 4px 12px rgba(26,26,26,.08);
	--shadow-lg: 0 12px 32px rgba(26,26,26,.12);

	--ease: cubic-bezier(.4, 0, .2, 1);
	--dur: 0.2s;

	/* ---- Header heights (used by sticky offset + mobile) ---- */
	--header-topbar: 40px;
	--header-main:   84px;

	--z-header: 1000;
	--z-megamenu: 1010;
	--z-drawer: 1100;
	--z-overlay: 1090;
}

/* Respect reduced motion globally. */
@media (prefers-reduced-motion: reduce) {
	:root { --dur: 0.001s; }
	* { scroll-behavior: auto !important; }
}