/*
 * LfC Design Tokens
 * Source of truth: Brand_Guideline_Learning_for_Change.pdf
 * All other CSS files should reference these variables — never hard-code colours.
 */

:root {
	/* --- Primary brand --- */
	--lfc-coral:      #F76250;
	--lfc-teal:       #05ABA9;
	--lfc-coral-light: #fa7268;
	--lfc-teal-pale:  #9ce5de;
	--lfc-coral-soft: #f77565;

	/* --- Secondary --- */
	--lfc-teal-deep:   #047C7A;
	--lfc-teal-mint:   #7BD7D6;
	--lfc-coral-warm:  #F98E7E;
	--lfc-yellow:      #FFC466;
	--lfc-navy:        #2C3540;
	--lfc-offwhite:    #F5F4F2;
	--lfc-teal-dark:   #0E7C79;
	--lfc-coral-peach: #FF8A73;

	/* WCAG AA accessible coral. 5.12:1 on white (verified by Lighthouse).
	   Earlier value #D7472F only reached 4.34:1 — not enough for normal text. */
	--lfc-coral-deep:  #C73C26;

	/* --- Functional tokens --- */
	--lfc-text:         var(--lfc-navy);
	--lfc-bg:           #ffffff;
	--lfc-bg-alt:       var(--lfc-offwhite);
	--lfc-link:         var(--lfc-coral-deep);
	--lfc-link-hover:   var(--lfc-teal-deep);
	--lfc-cta-bg:       var(--lfc-coral-deep);
	--lfc-cta-bg-hover: var(--lfc-coral);
	--lfc-focus-ring:   var(--lfc-teal-deep);

	/* --- Typography --- */
	--lfc-font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--lfc-font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--lfc-font-mono:    'Courier New', Courier, monospace;

	/* --- Type scale (mobile-first, fluid) --- */
	--lfc-text-xs:   0.75rem;   /* 12px */
	--lfc-text-sm:   0.875rem;  /* 14px */
	--lfc-text-base: 1rem;      /* 16px */
	--lfc-text-lg:   1.125rem;  /* 18px */
	--lfc-text-xl:   1.25rem;   /* 20px */
	--lfc-text-2xl:  1.5rem;    /* 24px */
	--lfc-text-3xl:  1.875rem;  /* 30px */
	--lfc-text-4xl:  2.25rem;   /* 36px */
	--lfc-text-5xl:  3rem;      /* 48px */

	/* --- Spacing scale (numeric) --- */
	--lfc-space-1: 0.25rem;   /* 4px  */
	--lfc-space-2: 0.5rem;    /* 8px  */
	--lfc-space-3: 0.75rem;   /* 12px */
	--lfc-space-4: 1rem;      /* 16px */
	--lfc-space-6: 1.5rem;    /* 24px */
	--lfc-space-8: 2rem;      /* 32px */
	--lfc-space-12: 3rem;     /* 48px */
	--lfc-space-16: 4rem;     /* 64px */
	--lfc-space-20: 5rem;     /* 80px */
	--lfc-space-24: 6rem;     /* 96px */

	/* --- Spacing scale (t-shirt aliases) --- */
	--lfc-space-xs: var(--lfc-space-2);   /* 8px  */
	--lfc-space-sm: var(--lfc-space-4);   /* 16px */
	--lfc-space-md: var(--lfc-space-6);   /* 24px */
	--lfc-space-lg: var(--lfc-space-12);  /* 48px */
	--lfc-space-xl: var(--lfc-space-20);  /* 80px */
	--lfc-space-2xl: 7.5rem;              /* 120px */

	/* --- Border radius --- */
	--lfc-radius-sm:   4px;
	--lfc-radius-md:   8px;
	--lfc-radius-lg:   16px;
	--lfc-radius-xl:   24px;
	--lfc-radius-full: 9999px;

	/* --- Shadows --- */
	--lfc-shadow-sm: 0 1px 3px rgba(44, 53, 64, 0.12);
	--lfc-shadow-md: 0 4px 12px rgba(44, 53, 64, 0.15);
	--lfc-shadow-lg: 0 8px 24px rgba(44, 53, 64, 0.18);

	/* --- Layout --- */
	--lfc-max-width:        1200px;
	--lfc-max-width-narrow: 800px;
	--lfc-container-pad:    var(--lfc-space-4);
	/* Aliases for new design CSS */
	--lfc-container-max:     var(--lfc-max-width);
	--lfc-container-padding: var(--lfc-container-pad);

	/* --- Transitions --- */
	--lfc-transition: 0.2s ease;
}

@media ( min-width: 768px ) {
	:root {
		--lfc-container-pad: var(--lfc-space-8);
	}
}