/* ===========================================
   GY SUMMIT 2026 DESIGN SYSTEM
   PCEA GITHUNGURI PRESBYTERY
=========================================== */

:root{

/* PRIMARY COLORS */

--primary:#C8A24A;
--primary-dark:#A8842F;
--primary-light:#E5C979;

--secondary:#1565C0;

--success:#2E7D32;

--danger:#D32F2F;

--warning:#F9A825;

--info:#0288D1;


/* BACKGROUND */

--background:#F5F7FA;

--surface:#FFFFFF;

--surface-light:#FAFAFA;

--dark:#1B1B1B;

--dark-light:#2F2F2F;


/* TEXT */

--text:#222222;

--text-light:#666666;

--text-white:#FFFFFF;

--text-muted:#999999;


/* BORDER */

--border:#E5E7EB;

--border-dark:#D1D5DB;


/* SHADOW */

--shadow-sm:0 2px 8px rgba(0,0,0,.08);

--shadow-md:0 6px 18px rgba(0,0,0,.12);

--shadow-lg:0 10px 30px rgba(0,0,0,.18);

--shadow-xl:0 18px 40px rgba(0,0,0,.25);


/* GLASS */

--glass:rgba(255,255,255,.18);

--glass-border:rgba(255,255,255,.30);

--backdrop:blur(15px);


/* BORDER RADIUS */

--radius-xs:4px;

--radius-sm:8px;

--radius-md:14px;

--radius-lg:20px;

--radius-xl:30px;

--radius-circle:50%;


/* SPACING */

--space-xs:6px;

--space-sm:10px;

--space-md:18px;

--space-lg:28px;

--space-xl:40px;

--space-2xl:60px;


/* FONT */

--font-main:'Inter','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

--font-display:'Fraunces',Georgia,'Times New Roman',serif;


/* FONT SIZE */

--fs-xs:.75rem;

--fs-sm:.9rem;

--fs-md:1rem;

--fs-lg:1.2rem;

--fs-xl:1.5rem;

--fs-2xl:2rem;

--fs-3xl:2.7rem;

--fs-4xl:3.5rem;


/* FONT WEIGHT */

--fw-light:300;

--fw-normal:400;

--fw-medium:500;

--fw-semibold:600;

--fw-bold:700;

--fw-black:800;


/* TRANSITIONS */

--transition-fast:.2s ease;

--transition:.3s ease;

--transition-slow:.5s ease;


/* CONTAINER */

--container:1300px;


/* NAVBAR */

--navbar-height:80px;


/* BUTTONS */

--btn-height:48px;


/* Z INDEX */

--z-dropdown:1000;

--z-navbar:1100;

--z-modal:2000;

--z-loader:3000;

}


/* RESET */

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}

html{

font-size:16px;

}

body{

font-family:var(--font-main);

background:var(--background);

color:var(--text);

overflow-x:hidden;

line-height:1.6;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

button{

font-family:inherit;

cursor:pointer;

border:none;

outline:none;

}

input,

select,

textarea{

font-family:inherit;

outline:none;

}

ul{

list-style:none;

}

section{

padding:70px 8%;

}

.container{

max-width:var(--container);

margin:auto;

}