/* ==========================================================================
   IvyPanda — variables.css
   Root color/font/layout variables — the single source of truth for the whole theme's look.
   ========================================================================== */

/* ==========================================================================
   IvyPanda — main.css
   HOW TO CUSTOMIZE PER CLIENT:
   1. Change the colors below (or use Appearance > Customize > IvyPanda Colors
      in wp-admin — those settings override these defaults automatically).
   2. Change --font-heading / --font-body to swap fonts.
   3. Section-specific styles are grouped and labeled below.
   ========================================================================== */

:root {
	/* Colors — MintPanda Labs brand palette.
	   Mint = main brand color, used for buttons/CTAs/links.
	   Dark shade = footer + hero backgrounds. Nude-orange is a
	   quiet accent only — small details, never large blocks, so it
	   never competes with the mint. */
	--color-primary: #5ED4B8;        /* mint — buttons, CTAs, links */
	--color-secondary: #233A34;      /* dark shade — hero & footer backgrounds */
	--color-accent: #D89B72;         /* muted nude-orange — small accents only (icon strokes, badges, hover borders) */

	/* Light tints — for card backgrounds, so the full-strength colors
	   stay reserved for small details only. */
	--color-secondary-light: #E3E7E5;
	--color-accent-light: #F6E9DF;
	--color-primary-light: #E3F6F1;

	--color-text: #1f2937;
	--color-bg: #FBF7F2;             /* cream page background */
	--color-surface: #ffffff;        /* card backgrounds, sits on top of --color-bg */
	--color-muted: #6b7280;
	--color-border: #E7E0D6;         /* warm-toned border to match cream bg */

	/* Header — a light nude tint of --color-secondary, kept separate so
	   it can be themed independently of the page/footer. Text is dark
	   since the header background is light, not dark. */
	--color-header-bg: #EDE7DD;
	--color-header-text: #233A34;
	--color-header-bg-scrolled: rgba(237, 231, 221, 0.85); /* same nude, translucent for the blur-on-scroll effect */

	/* Text color to put ON TOP of --color-primary / --color-accent.
	   Both are light colors, so white text fails contrast — use the
	   dark shade instead (same treatment as the logo: dark text on mint). */
	--color-on-primary: #233A34;
	--color-on-accent: #233A34;

	/* Fonts */
	--font-heading: 'Poppins', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	/* Layout */
	--container-width: 1140px;
	--radius: 10px;
	--shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}