:root {

    /* ==========================================
       COLOURS
    ========================================== */

    --ss-primary: #2E7D32;
    --ss-secondary: #1E3A5F;
    --ss-accent: #F59E0B;

    --ss-text: #1F2937;
    --ss-text-light: #6B7280;

    --ss-background: #FFFFFF;
    --ss-surface: #F8FAFC;

    --ss-border: #E5E7EB;
	
	
	/* ==========================================
	   STATE COLOURS
	========================================== */

	--ss-success-bg: rgba(46, 125, 50, 0.08);
	--ss-success-border: rgba(46, 125, 50, 0.18);

	--ss-info-bg: rgba(30, 58, 95, 0.08);
	--ss-info-border: rgba(30, 58, 95, 0.18);


    /* ==========================================
       TYPOGRAPHY
    ========================================== */

    --ss-font-body: "Inter", sans-serif;
    --ss-font-heading: "Inter", sans-serif;


    /* ==========================================
       SPACING SCALE
    ========================================== */

    --ss-space-1: 0.25rem;   /* 4px */
    --ss-space-2: 0.5rem;    /* 8px */
    --ss-space-3: 0.75rem;   /* 12px */
    --ss-space-4: 1rem;      /* 16px */
    --ss-space-5: 1.5rem;    /* 24px */
    --ss-space-6: 2rem;      /* 32px */
    --ss-space-7: 3rem;      /* 48px */
    --ss-space-8: 4rem;      /* 64px */
    --ss-space-9: 6rem;      /* 96px */


    /* ==========================================
       COMPONENT SPACING
    ========================================== */

    --ss-section-padding: var(--ss-space-8);
    --ss-hero-padding: var(--ss-space-9);
    --ss-container-padding: var(--ss-space-5);
    --ss-card-padding: var(--ss-space-5);

    --ss-button-padding-y: var(--ss-space-4);
    --ss-button-padding-x: var(--ss-space-5);
	
	
	/* ==========================================
		GRID
	========================================== */

	--ss-grid-columns: 12;
	--ss-grid-gap: var(--ss-space-5);
	
	
	/* ==========================================
	   RADIUS
	========================================== */

	--ss-radius-sm: 0.5rem;	  /* 8px */
	--ss-radius-md: 0.75rem;  /* 12px */
	--ss-radius-lg: 1rem;	  /* 16px */
	--ss-radius-full: 999px;


	/* ==========================================
	   SHADOWS
	========================================== */

	--ss-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
	--ss-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.1);
	--ss-shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.12);
	
	/* Menus, dropdowns, popovers */
	--ss-shadow-overlay: 0 12px 24px rgba(15, 23, 42, 0.08);

}