/* GreenSoil Exchange — Design System (framework-free) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --c-primary-950:#0D2B1A; --c-primary-900:#143D26; --c-primary-800:#1C5234; --c-primary-700:#246843;
  --c-primary-600:#2D7D52; --c-primary-500:#3A9664; --c-primary-400:#52AD79; --c-primary-300:#7DC498;
  --c-primary-200:#ACD9BF; --c-primary-100:#D4EDE0; --c-primary-50:#EDF7F2;
  --c-earth-900:#2C1A0E; --c-earth-800:#3D2512; --c-earth-700:#5C3A1E; --c-earth-600:#7A4F2C;
  --c-earth-500:#9B6840; --c-earth-400:#B88A62; --c-earth-300:#D4AE8A; --c-earth-200:#E8D1B8;
  --c-earth-100:#F5EAD9; --c-earth-50:#FBF6EE;
  --c-teal-900:#0A2E35; --c-teal-800:#0F4550; --c-teal-700:#155D6B; --c-teal-600:#1C7A8C;
  --c-teal-500:#2499B0; --c-teal-400:#3DB8CF; --c-teal-300:#7DD1E0; --c-teal-200:#B0E4EE;
  --c-teal-100:#D6F2F8; --c-teal-50:#EEF9FC;
  --c-neutral-950:#0C0E0D; --c-neutral-900:#141715; --c-neutral-800:#1E2320; --c-neutral-700:#2D342F;
  --c-neutral-600:#445048; --c-neutral-500:#637069; --c-neutral-400:#8B978F; --c-neutral-300:#B4BDB7;
  --c-neutral-200:#D4DAD6; --c-neutral-150:#E3E8E5; --c-neutral-100:#EDF1EE; --c-neutral-50:#F6F8F7;
  --c-white:#FFFFFF;
  --c-success-500:#22A357; --c-success-100:#D1F2E1; --c-warning-500:#D97706; --c-warning-100:#FEF3C7;
  --c-error-500:#DC2626; --c-error-100:#FEE2E2; --c-info-500:#2499B0; --c-info-100:#D6F2F8;
  --font-display:'DM Serif Display',Georgia,serif; --font-body:'DM Sans','Segoe UI',system-ui,sans-serif;
  --text-xs:.6875rem; --text-sm:.75rem; --text-base:.875rem; --text-md:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-normal:1.5; --lh-relaxed:1.7;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:9999px;
  --shadow-xs:0 1px 2px rgba(14,30,20,.05); --shadow-sm:0 1px 3px rgba(14,30,20,.08),0 1px 2px rgba(14,30,20,.06);
  --shadow-md:0 4px 6px -1px rgba(14,30,20,.08),0 2px 4px -1px rgba(14,30,20,.06);
  --shadow-lg:0 10px 15px -3px rgba(14,30,20,.08),0 4px 6px -2px rgba(14,30,20,.05);
  --shadow-xl:0 20px 25px -5px rgba(14,30,20,.1),0 10px 10px -5px rgba(14,30,20,.04);
  --shadow-2xl:0 25px 50px -12px rgba(14,30,20,.18);
  --border-base:1px solid var(--c-neutral-200);
  --t-base:200ms ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--c-neutral-900);background:var(--c-neutral-50);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{border:none;background:none;cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);border-radius:var(--r-md);font-weight:var(--fw-medium);font-size:var(--text-sm);cursor:pointer;transition:all var(--t-base);border:1px solid transparent;white-space:nowrap}
.btn-xs{height:28px;padding:0 var(--sp-3);font-size:var(--text-xs)}
.btn-sm{height:32px;padding:0 var(--sp-3)}
.btn-md{height:40px;padding:0 var(--sp-5)}
.btn-lg{height:48px;padding:0 var(--sp-6);font-size:var(--text-md)}
.btn-xl{height:56px;padding:0 var(--sp-8);font-size:var(--text-md);border-radius:var(--r-lg)}
.btn-primary{background:var(--c-primary-500);color:#fff;border-color:var(--c-primary-500)}
.btn-primary:hover{background:var(--c-primary-600);border-color:var(--c-primary-600)}
.btn-secondary{background:#fff;color:var(--c-neutral-800);border-color:var(--c-neutral-200);box-shadow:var(--shadow-xs)}
.btn-secondary:hover{border-color:var(--c-neutral-300);background:var(--c-neutral-50)}
.btn-ghost{background:transparent;color:var(--c-neutral-700)}
.btn-ghost:hover{background:var(--c-neutral-100)}
.btn-danger{background:var(--c-error-500);color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-dark{background:var(--c-neutral-900);color:#fff;border-color:var(--c-neutral-900)}
.btn-dark:hover{background:var(--c-neutral-800)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.w-full{width:100%}

.form-group{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.form-label{font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--c-neutral-700)}
.form-hint{font-size:var(--text-xs);color:var(--c-neutral-500)}
.input{width:100%;height:40px;padding:0 var(--sp-4);background:#fff;border:var(--border-base);border-radius:var(--r-md);font-size:var(--text-sm);color:var(--c-neutral-900);outline:none;transition:all var(--t-base)}
.input:focus{border-color:var(--c-primary-500);box-shadow:0 0 0 3px rgba(58,150,100,.15)}
textarea.input{min-height:96px;padding:var(--sp-3) var(--sp-4);resize:vertical;height:auto}
select.input{cursor:pointer}

.card{background:#fff;border:var(--border-base);border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.card-sm{border-radius:var(--r-lg);padding:var(--sp-4)}

.badge{display:inline-flex;align-items:center;gap:var(--sp-1);border-radius:var(--r-full);font-size:var(--text-xs);font-weight:var(--fw-medium);padding:2px var(--sp-2);white-space:nowrap}
.badge-green{background:var(--c-primary-100);color:var(--c-primary-800)}
.badge-teal{background:var(--c-teal-100);color:var(--c-teal-800)}
.badge-warning{background:var(--c-warning-100);color:#92400e}
.badge-error{background:var(--c-error-100);color:var(--c-error-500)}
.badge-neutral{background:var(--c-neutral-100);color:var(--c-neutral-700)}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

.stat-card{background:#fff;border:var(--border-base);border-radius:var(--r-xl);padding:var(--sp-5) var(--sp-6);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat-card-accent{position:absolute;top:0;left:0;right:0;height:3px}
.stat-label{font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--c-neutral-500);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-2)}
.stat-value{font-size:var(--text-3xl);font-weight:var(--fw-bold);color:var(--c-neutral-900);letter-spacing:-.03em;line-height:1;margin-bottom:var(--sp-2)}
.stat-sub{font-size:var(--text-xs);color:var(--c-neutral-500)}

.table-wrap{border:var(--border-base);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm)}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th{padding:var(--sp-3) var(--sp-4);text-align:left;font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--c-neutral-500);text-transform:uppercase;letter-spacing:.06em;background:var(--c-neutral-50);border-bottom:var(--border-base);white-space:nowrap}
.table td{padding:var(--sp-3) var(--sp-4);font-size:var(--text-sm);color:var(--c-neutral-800);border-bottom:1px solid var(--c-neutral-100);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--c-neutral-50)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.flex{display:flex} .flex-col{display:flex;flex-direction:column}
.items-center{align-items:center} .justify-between{justify-content:space-between} .justify-center{justify-content:center}
.gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)}
.flex-wrap{flex-wrap:wrap}
.mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)}
.mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)}
.text-xs{font-size:var(--text-xs)} .text-sm{font-size:var(--text-sm)} .text-lg{font-size:var(--text-lg)} .text-xl{font-size:var(--text-xl)} .text-2xl{font-size:var(--text-2xl)}
.fw-medium{font-weight:var(--fw-medium)} .fw-semibold{font-weight:var(--fw-semibold)} .fw-bold{font-weight:var(--fw-bold)}
.text-muted{color:var(--c-neutral-500)} .text-primary{color:var(--c-primary-600)}
.section-title{font-size:var(--text-xl);font-weight:var(--fw-semibold);color:var(--c-neutral-900);letter-spacing:-.02em}
.section-label{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--c-neutral-500);text-transform:uppercase;letter-spacing:.08em}
.divider{height:1px;background:var(--c-neutral-200);margin:var(--sp-4) 0}

/* ── Top nav ── */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);padding:0 var(--sp-8);height:68px;display:flex;align-items:center;gap:var(--sp-8)}
.site-nav-logo{display:flex;align-items:center;gap:var(--sp-3);font-weight:var(--fw-semibold);font-size:var(--text-md)}
.site-nav-logo-mark{width:34px;height:34px;background:var(--c-primary-800);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px}
.site-nav-links{display:flex;gap:var(--sp-1);flex:1}
.site-nav-link{padding:var(--sp-2) var(--sp-3);font-size:var(--text-sm);color:var(--c-neutral-600);border-radius:6px}
.site-nav-link:hover{color:var(--c-neutral-900);background:var(--c-neutral-100)}
.site-nav-link.active{color:var(--c-primary-700);font-weight:var(--fw-medium)}

/* ── Hero ── */
.hero-section{background:linear-gradient(165deg,var(--c-primary-950) 0%,var(--c-primary-800) 55%,var(--c-primary-700) 100%);padding:var(--sp-24) var(--sp-8) var(--sp-20);position:relative;overflow:hidden}
.hero-glow{position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(58,150,100,.3) 0%,transparent 60%)}
.hero-content{position:relative;z-index:1;max-width:680px;margin:0 auto;text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-full);padding:var(--sp-1) var(--sp-3);font-size:var(--text-xs);color:var(--c-primary-200);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--sp-6)}
.hero-title{font-family:var(--font-display);font-size:52px;line-height:1.1;color:#fff;margin-bottom:var(--sp-6);letter-spacing:-.02em}
.hero-title-accent{color:var(--c-primary-300);font-style:italic}
.hero-sub{font-size:var(--text-lg);color:rgba(255,255,255,.72);line-height:var(--lh-relaxed);margin-bottom:var(--sp-10)}
.hero-ctas{display:flex;gap:var(--sp-4);align-items:center;justify-content:center;flex-wrap:wrap}
.hero-stat-row{display:flex;gap:var(--sp-10);margin-top:var(--sp-16);padding-top:var(--sp-8);border-top:1px solid rgba(255,255,255,.1);justify-content:center;flex-wrap:wrap}
.hero-stat-val{font-size:var(--text-3xl);font-weight:var(--fw-bold);color:#fff;letter-spacing:-.03em}
.hero-stat-lbl{font-size:var(--text-xs);color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em}

.feature-card{background:#fff;border:var(--border-base);border-radius:var(--r-xl);padding:var(--sp-8);box-shadow:var(--shadow-sm)}
.feature-icon{width:52px;height:52px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:var(--sp-5)}
.feature-icon.green{background:var(--c-primary-100)} .feature-icon.teal{background:var(--c-teal-100)} .feature-icon.earth{background:var(--c-earth-100)}

.role-card{border-radius:var(--r-2xl);padding:var(--sp-10);color:#fff}
.role-card.farmer{background:linear-gradient(140deg,var(--c-primary-900),var(--c-primary-700))}
.role-card.buyer{background:linear-gradient(140deg,var(--c-teal-900),var(--c-teal-700))}
.role-card-title{font-family:var(--font-display);font-size:30px;margin-bottom:var(--sp-4)}

/* ── Page shell ── */
.page-body{max-width:1200px;margin:0 auto;padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-6)}
.page-header-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:var(--sp-4)}
.page-title{font-size:var(--text-2xl);font-weight:var(--fw-bold);letter-spacing:-.02em}

footer.site-footer{background:var(--c-primary-950);padding:var(--sp-16) var(--sp-8) var(--sp-8);color:rgba(255,255,255,.5);margin-top:var(--sp-20)}
footer.site-footer a{color:rgba(255,255,255,.6)}

.auth-card{max-width:420px;margin:var(--sp-16) auto;background:#fff;border-radius:var(--r-2xl);box-shadow:var(--shadow-xl);padding:var(--sp-8)}
.toggle-group{display:flex;background:var(--c-neutral-100);border:var(--border-base);border-radius:var(--r-lg);padding:3px;gap:2px;margin-bottom:var(--sp-6)}
.toggle-option{flex:1;text-align:center;height:36px;line-height:36px;border-radius:var(--r-md);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--c-neutral-600);cursor:pointer}
.toggle-option.active{background:#fff;color:var(--c-neutral-900);box-shadow:var(--shadow-sm)}

.notif{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-lg);border:1px solid;font-size:var(--text-sm)}
.notif-error{background:var(--c-error-100);border-color:#fca5a5;color:var(--c-error-500)}
.notif-success{background:var(--c-primary-50);border-color:var(--c-primary-200);color:var(--c-primary-800)}
.notif-info{background:var(--c-teal-50);border-color:var(--c-teal-200)}

.tabs{display:flex;border-bottom:var(--border-base);gap:0;padding:0 var(--sp-5)}
.tab{padding:var(--sp-3) var(--sp-4);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--c-neutral-500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--c-primary-600);border-bottom-color:var(--c-primary-500)}
.admin-panel{padding:var(--sp-6)}

.admin-switch{width:40px;height:22px;border-radius:var(--r-full);background:var(--c-neutral-300);position:relative;cursor:pointer;flex-shrink:0}
.admin-switch.on{background:var(--c-primary-500)}
.admin-switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform var(--t-base)}
.admin-switch.on::after{transform:translateX(18px)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) 0;border-bottom:1px solid var(--c-neutral-100)}
.toggle-row:last-child{border-bottom:none}

.toast{position:fixed;bottom:var(--sp-6);right:var(--sp-6);background:var(--c-neutral-900);color:#fff;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-lg);font-size:var(--text-sm);box-shadow:var(--shadow-xl);z-index:500;opacity:0;transform:translateY(8px);transition:all var(--t-base);pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

.mkt-card{background:#fff;border:var(--border-base);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--t-base)}
.mkt-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.mkt-img{height:140px;background:linear-gradient(155deg,var(--c-primary-100),var(--c-earth-100));display:flex;align-items:center;justify-content:center;font-size:38px;position:relative}
.mkt-body{padding:var(--sp-4) var(--sp-5)}
.mkt-price{font-size:var(--text-xl);font-weight:var(--fw-bold);letter-spacing:-.02em}

.inline-edit{background:transparent;border:1px dashed var(--c-neutral-300);border-radius:6px;padding:2px 6px;font-size:var(--text-sm);width:100%}
.inline-edit:focus{outline:none;border-style:solid;border-color:var(--c-primary-500);background:var(--c-primary-50)}