/**
 * Design tokens — extracted verbatim from the original Elementor global kit
 * (post 131). See docs/full-analysis.md §5.
 */

:root {
	/* ---- Brand colors ---- */
	--color-primary: #2925F4;          /* brand blue (card hover border) */
	--color-heading: #002128;          /* headings / secondary */
	--color-text: #434856;             /* body text */
	--color-accent: #FC7001;           /* orange accent */
	--color-cta: #28B8B3;              /* teal — default button bg */
	--color-cta2: #62B3B9;             /* secondary teal — tabs/pricing accents */
	--color-cta-hover: #41D6D1;        /* teal hover (social) */
	--color-green: #ABCB42;
	--color-grey: #A5A5A5;
	--color-primary-light: #00A4C7;
	--color-blue: #005A6E;             /* footer bg */
	--color-tint: #00272F;             /* link normal */
	--color-cta-bg: #CCE6EB;           /* CTA band bg */
	--color-bg-2: #FAFEFF;
	--color-home-wash: #EAD0C336;      /* homepage section wash */
	--color-h2: #52547C;
	--color-h6: #EFA286;
	--color-card-hover: #F1F1F1;

	--color-white: #FFFFFF;
	--color-black: #000000;
	--color-border: #DFDFDF;
	--color-border-dark: #113B43;

	/* Semantic aliases */
	--color-link: var(--color-tint);
	--color-link-hover: var(--color-cta);
	--color-background: var(--color-white);
	--color-background-alt: var(--color-home-wash);

	/* ---- Typography ---- */
	/* ivymode = Adobe (loads on live domain); Fraunces = self-hosted local fallback */
	--font-primary: "ivymode", "Fraunces", Georgia, "Times New Roman", serif;   /* display */
	/* muli = Adobe; Mulish = self-hosted (same font, works everywhere) */
	--font-secondary: "muli", "Mulish", "Segoe UI", system-ui, sans-serif;      /* body */

	--font-size-base: 1.125rem;   /* 18px */
	--font-size-sm: 1rem;         /* 16px */
	--font-size-xs: 0.875rem;     /* 14px */
	--font-size-md: 1.3125rem;    /* 21px (h4) */
	--font-size-lg: 1.5rem;       /* 24px (h3) */
	--font-size-xl: 2.25rem;      /* 36px (h2) */
	--font-size-2xl: 3.5rem;      /* 56px (hero h1) */
	--font-size-3xl: 4.375rem;    /* 70px (main heading) */

	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-tight: 1.2;
	--line-height-heading: 1.3;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.8;

	/* ---- Spacing ---- */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2.5rem;
	--spacing-xl: 4rem;
	--spacing-2xl: 6.25rem;    /* 100px — the standard section padding */
	--section-padding: 6.25rem;
	--section-padding-tablet: 5rem;
	--section-padding-mobile: 4rem;

	/* ---- Layout ---- */
	--container-max-width: 1200px;
	--container-wide: 1532px;   /* header, footer, hero + each page's top hero/intro band */
	--container-narrow: 740px;
	--container-padding: 40px;
	--header-height: 80px;

	/* ---- Breakpoints (reference; used in media queries) ---- */
	--bp-mobile: 480px;
	--bp-tablet: 768px;
	--bp-desktop: 1251px;

	/* ---- Borders & radius ---- */
	--radius-sm: 6px;
	--radius-md: 10px;         /* buttons & cards */
	--radius-lg: 20px;
	--radius-round: 50%;

	/* ---- Shadows ---- */
	--shadow-card: 0 17px 40px -30px rgba(104, 104, 104, 0.5);
	--shadow-header: 0 8px 25px 0 rgba(193, 193, 193, 0.5);
	--shadow-image: 34px 57px 79px 46px rgba(0, 0, 0, 0.5);
	--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);

	/* ---- Transitions ---- */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;
	--transition-slow: 0.5s ease;
}