/* ============================================================
   ESINLE — Verdant Tech Design System v1.0
   Independent of Mesete, calibrated with OKLCH
   ============================================================ */

/* ── Design Tokens ── */
:root {
  /* Primary */
  --es-green:        #0D7C4B;
  --es-green-hover:  #096B3E;
  --es-green-soft:   #E8F5EE;
  --es-green-pale:   #F2F9F5;

  /* Ink */
  --es-ink:          #1A1D1C;
  --es-ink-soft:     #5C6B63;
  --es-ink-faint:    #768C80;

  /* Surface */
  --es-bg:           #F7F9F8;
  --es-surface:      #FFFFFF;
  --es-border:       #EBF0ED;
  --es-border-strong:#D0DAD4;

  /* Accent */
  --es-gold:         #C8A951;
  --es-gold-soft:    #F7F2E2;

  /* Status */
  --es-success:      #0CA30C;
  --es-warning:      #FAB219;
  --es-error:        #D03B3B;

  /* Typography */
  --es-font:         "Inter", "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --es-font-mono:    "JetBrains Mono", "Cascadia Code", "Consolas", "SF Mono", "Menlo", monospace;

  /* Spacing & Radius */
  --es-radius-sm:    8px;
  --es-radius:       12px;
  --es-radius-lg:    20px;
  --es-maxw:         1280px;
  --es-section-gap:  80px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--es-font);
  font-size:1rem;
  font-weight:400;
  line-height:1.65;
  color:var(--es-ink);
  background:var(--es-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--es-green);text-decoration:none}
a:hover{color:var(--es-green-hover)}

/* ── Typography ── */
h1,.h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;letter-spacing:-0.03em;line-height:1.15}
h2,.h2{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:600;letter-spacing:-0.02em;line-height:1.25}
h3,.h3{font-size:1.2rem;font-weight:600;letter-spacing:-0.01em;line-height:1.3}
h4,.h4{font-size:1rem;font-weight:600}
.text-sm{font-size:0.85rem;line-height:1.6;color:var(--es-ink-soft)}
.text-xs{font-size:0.75rem;line-height:1.5;color:var(--es-ink-faint)}
.mono{font-family:var(--es-font-mono);font-size:0.8rem}

/* ── Layout ── */
.es-wrap{max-width:var(--es-maxw);margin:0 auto;padding:0 24px}
.es-section{padding:var(--es-section-gap) 0}
.es-section--sm{padding:48px 0}
.es-grid{display:grid;gap:24px}
.es-grid-2{grid-template-columns:repeat(2,1fr)}
.es-grid-3{grid-template-columns:repeat(3,1fr)}
.es-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:768px){.es-grid-2,.es-grid-3,.es-grid-4{grid-template-columns:1fr}}

/* ── Component: Buttons ── */
.es-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--es-font);font-size:0.9rem;font-weight:600;
  padding:12px 28px;border-radius:var(--es-radius-sm);border:none;
  cursor:pointer;transition:background .2s,opacity .2s;
  text-decoration:none;line-height:1.4;
}
.es-btn--primary{background:var(--es-green);color:#fff}
.es-btn--primary:hover{background:var(--es-green-hover);color:#fff}
.es-btn--outline{background:transparent;color:var(--es-ink);border:1.5px solid var(--es-ink)}
.es-btn--outline:hover{background:var(--es-ink);color:#fff}
.es-btn--lg{padding:14px 36px;font-size:1rem}

/* ── Component: Cards ── */
.es-card{
  background:var(--es-surface);border:1px solid var(--es-border);
  border-radius:var(--es-radius);padding:24px;
  transition:border-color .2s,box-shadow .2s;
}
.es-card:hover{border-color:var(--es-border-strong);box-shadow:0 4px 20px rgba(0,0,0,0.04)}

/* ── Component: Badge ── */
.es-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:0.72rem;font-weight:600;padding:4px 10px;
  border-radius:6px;line-height:1.4;
}
.es-badge--green{background:var(--es-green-soft);color:var(--es-green)}
.es-badge--gold{background:var(--es-gold-soft);color:#A88C34}

/* ── Component: Breadcrumb ── */
.es-breadcrumb{padding:16px 0;font-size:0.8rem;color:var(--es-ink-faint)}
.es-breadcrumb a{color:var(--es-ink-soft)}
.es-breadcrumb span{color:var(--es-ink-faint)}

/* ── Component: Form ── */
.es-input,.es-textarea{
  width:100%;font-family:var(--es-font);font-size:0.95rem;
  padding:12px 16px;border:1.5px solid var(--es-border-strong);
  border-radius:var(--es-radius-sm);background:var(--es-surface);
  color:var(--es-ink);transition:border-color .2s;
}
.es-input:focus,.es-textarea:focus{outline:none;border-color:var(--es-green);box-shadow:0 0 0 3px rgba(13,124,75,0.25)}
.es-textarea{min-height:120px;resize:vertical}
.es-label{display:block;font-size:0.85rem;font-weight:500;margin-bottom:6px;color:var(--es-ink)}

/* ── Component: Icons (SVG) ── */
.es-icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.es-icon--sm{width:16px;height:16px}

/* ── Utilities ── */
.es-text-center{text-align:center}
.es-mt-0{margin-top:0}
.es-mt-s{margin-top:16px}
.es-mt-m{margin-top:32px}
.es-mt-l{margin-top:48px}
.es-mb-s{margin-bottom:16px}
.es-mb-m{margin-bottom:32px}
@media(max-width:768px){.es-section{padding:48px 0}}