/* ==========================================
   KEDTL DIGITAL PLATFORM
   Design System v1.0
   ========================================== */


/* ===============================
   1. BRAND COLORS
   =============================== */

:root {


/* Primary Colors */

--kedtl-green: #0B6B45;
--kedtl-gold: #D9A441;
--kedtl-navy: #0B1F3A;


/* Secondary Colors */

--kedtl-light-green: #E8F5EF;
--kedtl-light-gold: #FFF5DD;


/* Neutral Colors */

--kedtl-white: #FFFFFF;
--kedtl-light: #F5F7FA;
--kedtl-gray: #6B7280;
--kedtl-dark: #111827;



/* ===============================
   2. TYPOGRAPHY
   =============================== */


--font-heading: 'Montserrat', sans-serif;

--font-body: 'Inter', sans-serif;



/* ===============================
   3. SPACING SYSTEM
   =============================== */


--space-xs: 8px;
--space-sm: 16px;
--space-md: 32px;
--space-lg: 64px;
--space-xl: 96px;



/* ===============================
   4. BORDER RADIUS
   =============================== */


--radius-sm:10px;

--radius-md:20px;

--radius-lg:30px;

--radius-pill:50px;



/* ===============================
   5. SHADOW SYSTEM
   =============================== */


--shadow-sm:
0 5px 15px rgba(0,0,0,.06);


--shadow-md:
0 10px 30px rgba(0,0,0,.08);


--shadow-lg:
0 20px 50px rgba(0,0,0,.15);



/* ===============================
   6. TRANSITIONS
   =============================== */


--transition-fast:.2s ease;

--transition-normal:.3s ease;


}





/* =================================
   GLOBAL RESET
   ================================= */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{


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

color:var(--kedtl-dark);

background:var(--kedtl-white);

line-height:1.6;


}




/* =================================
   HEADINGS
   ================================= */


h1,
h2,
h3,
h4,
h5,
h6{


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

font-weight:700;

color:var(--kedtl-navy);


}





/* =================================
   CONTAINER SYSTEM
   ================================= */


.kedtl-section{


padding:var(--space-xl) 0;


}




/* =================================
   BUTTON SYSTEM
   ================================= */



.btn-kedtl-primary{


background:var(--kedtl-gold);

color:var(--kedtl-navy);


padding:14px 32px;


border-radius:var(--radius-pill);


font-weight:700;


text-decoration:none;


display:inline-block;


transition:var(--transition-normal);


}




.btn-kedtl-primary:hover{


background:var(--kedtl-green);

color:white;


}




.btn-kedtl-secondary{


border:2px solid var(--kedtl-green);


color:var(--kedtl-green);


padding:12px 30px;


border-radius:var(--radius-pill);


font-weight:600;


text-decoration:none;


display:inline-block;


transition:var(--transition-normal);


}




.btn-kedtl-secondary:hover{


background:var(--kedtl-green);

color:white;


}





/* =================================
   CARD BASE SYSTEM
   ================================= */



.kedtl-card{


background:white;


border-radius:var(--radius-md);


box-shadow:var(--shadow-md);


padding:30px;


transition:var(--transition-normal);


}



.kedtl-card:hover{


transform:translateY(-8px);


box-shadow:var(--shadow-lg);


}




/* =================================
   SECTION TITLES
   ================================= */


.section-title{


font-size:42px;


font-weight:800;


margin-bottom:20px;


}


.section-description{


color:var(--kedtl-gray);


font-size:18px;


max-width:700px;


}