/* GESP Africa Enterprise Design System
   Version 2.0
   NOTE: This starter extends your existing stylesheet.
   Replace or merge with your original as needed.
*/

:root{
 --navy:#001f4b;
 --gold:#b68d40;
 --bg:#f6f8fb;
 --surface:#fff;
 --text:#fff;
 --muted:#68768a;
 --radius-sm:8px;
 --radius:16px;
 --radius-lg:24px;
 --shadow:0 10px 30px rgba(0,31,75,.08);
 --shadow-hover:0 18px 45px rgba(0,31,75,.16);
 --space-xs:.5rem;
 --space-sm:.75rem;
 --space-md:1rem;
 --space-lg:1.5rem;
 --space-xl:2rem;
 --space-2xl:3rem;
 --transition:.3s ease;
 
     /* Primary Text */

    --text-heading: #001f4b;
    --text-body: #2b3b52;
    --text-secondary: #5d6c82;
    --text-muted: #8794a8;
    --text-light: #a8b2c3;
    --text-white: #ffffff;

    /* Brand Text */

    --text-primary: var(--navy);
    --text-accent: var(--gold);

    /* Status */

    --text-success: #15803d;
    --text-danger: #dc2626;
    --text-warning: #b45309;
    --text-info: #2563eb;
}

html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--bg);
 color:var(--text);
 font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--navy);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--gold)}
.container{width:min(1200px,calc(100% - 3rem));margin-inline:auto}
.section{padding:5rem 0}
.section-sm{padding:3rem 0}
.section-lg{padding:7rem 0}

h1,h2,h3,h4,h5,h6{
 margin:0 0 1rem;
 color:var(--navy);
 line-height:1.15;
}
h1{font-size:clamp(2.5rem,5vw,4rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
p{color:var(--muted)}

.btn{
 display:inline-flex;align-items:center;justify-content:center;
 padding:.9rem 1.5rem;border-radius:12px;font-weight:600;
 transition:var(--transition)
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#0d3f79;transform:translateY(-2px)}
.btn-outline{border:2px solid var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:#fff}

.card{
 background:#fff;
 border-radius:var(--radius);
 box-shadow:var(--shadow);
 padding:2rem;
 transition:var(--transition)
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}

.grid{display:grid;gap:2rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

input,textarea,select{
 width:100%;padding:.9rem 1rem;border:1px solid #d7dde7;
 border-radius:12px;font:inherit
}
input:focus,textarea:focus,select:focus{
 outline:none;border-color:var(--gold);
 box-shadow:0 0 0 4px rgba(182,141,64,.15)
}

table{width:100%;border-collapse:collapse}
th,td{padding:1rem;border-bottom:1px solid #e8edf3}
th{background:#f4f6fa;text-align:left}

.alert{padding:1rem;border-radius:12px}
.alert-success{background:#eaf8ee;color:#166534}
.alert-danger{background:#fdecec;color:#991b1b}
.alert-warning{background:#fff7e5;color:#92400e}
.alert-info{background:#eaf4ff;color:#1d4ed8}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:999px}

@media(max-width:768px){
.section{padding:3rem 0}
.container{width:min(100% - 2rem,1200px)}
}

@media(prefers-color-scheme:dark){
:root{
 --bg:#08111e;
 --surface:#0f1626;
 --text:#eef2f8;
 --muted:#b9c4d5;
}
body{background:var(--bg);color:var(--text)}
.card{background:var(--surface)}
a{color:#d8e4ff}
}

/* JS Fallback */
.reveal-hidden {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.w-16{
    width: 6rem !important;
}

.text-heading{
    color:var(--text-heading);
}

.text-body{
    color:var(--text-body);
}

.text-secondary{
    color:var(--text-secondary);
}

.text-muted{
    color:var(--text-muted);
}

.text-light{
    color:var(--text-light);
}

.text-primary{
    color:var(--text-primary);
}

.text-accent{
    color:var(--text-accent);
}

.text-success{
    color:var(--text-success);
}

.text-danger{
    color:var(--text-danger);
}

.text-warning{
    color:var(--text-warning);
}

.text-info{
    color:var(--text-info);
}

.text-white{
    color:var(--text-white);
}

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

h1,h2,h3,h4,h5,h6{
    color:var(--text-heading);
}

p{
    color:var(--text-body);
}

small{
    color:var(--text-muted);
}

label{
    color:var(--text-secondary);
}