/* ============================================================
   MANGALAM KISHORI SEEDS — Design System
   Palette grounded in the crop itself: soil, wheat grain, onion skin.
   ============================================================ */

:root{
  /* Base / ink */
  --soil-950:#201509;
  --soil-900:#2A1C10;
  --soil-800:#3B2A1A;
  --soil-600:#5C4630;
  --soil-400:#8A7659;
  --ink:#241A12;

  /* Primary — deep crop green (Regur field) */
  --field-800:#233625;
  --field-700:#2F4A2B;
  --field-600:#3B5B37;
  --field-500:#4C7043;
  --field-400:#6C8F5E;
  --field-100:#E4ECDE;

  /* Wheat family accent — ripened grain gold */
  --wheat-700:#8A5E1E;
  --wheat-500:#D9A441;
  --wheat-400:#E4BA63;
  --wheat-200:#EFCD82;
  --wheat-100:#F8ECCE;

  /* Onion family accent — onion-skin maroon */
  --onion-700:#5E1E2A;
  --onion-600:#8B2E3F;
  --onion-500:#A63E52;
  --onion-300:#D98FA0;
  --onion-100:#F5E1E5;

  /* Neutral / parchment ground */
  --parchment-50:#FBF7EE;
  --parchment-100:#F3EAD3;
  --parchment-200:#EAE0C4;
  --paper:#FFFDF8;

  --radius-stamp: 999px;
}

/* ============================================================
   Type
   ============================================================ */
.font-display{ font-family:'Newsreader', ui-serif, Georgia, serif; }
.font-body{ font-family:'Manrope', ui-sans-serif, system-ui, sans-serif; }
.font-mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

html{ scroll-behavior:smooth; }
body{
  font-family:'Manrope', ui-sans-serif, system-ui, sans-serif;
  background:var(--parchment-50);
  color:var(--ink);
}

::selection{ background:var(--wheat-300); color:var(--soil-950); }

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--field-600);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   Texture — subtle grain/soil noise background utility
   ============================================================ */
.grain-bg{
  background-color:var(--parchment-50);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(59,42,26,0.07) 1px, transparent 0);
  background-size:22px 22px;
}

.field-bg{
  background:linear-gradient(160deg,var(--field-800) 0%,var(--field-700) 45%,var(--field-600) 100%);
}

/* ============================================================
   Signature component — Certification Stamp badge
   (mirrors the germination/quality seals printed on real seed packets)
   ============================================================ */
.stamp{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:112px;
  height:112px;
  border-radius:var(--radius-stamp);
  border:1.5px dashed var(--soil-600);
  color:var(--soil-800);
  transform:rotate(-6deg);
  background:var(--paper);
  padding:10px;
  flex-shrink:0;
}
.stamp .stamp-inner{
  border:1px solid var(--soil-600);
  border-radius:var(--radius-stamp);
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8px;
}
.stamp-alt{ border-color:var(--onion-600); color:var(--onion-700); transform:rotate(5deg); }
.stamp-alt .stamp-inner{ border-color:var(--onion-600); }
.stamp-gold{ border-color:var(--wheat-700); color:var(--wheat-700); }
.stamp-gold .stamp-inner{ border-color:var(--wheat-700); }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  font-weight:600;
  font-size:0.95rem;
  padding:0.85rem 1.6rem;
  border-radius:0.4rem;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--field-700);
  color:var(--parchment-50);
  box-shadow:0 1px 0 rgba(0,0,0,0.15);
}
.btn-primary:hover{ background:var(--field-800); transform:translateY(-1px); }
.btn-gold{
  background:var(--wheat-500);
  color:var(--soil-950);
}
.btn-gold:hover{ background:var(--wheat-400); transform:translateY(-1px); }
.btn-outline{
  border:1.5px solid var(--field-700);
  color:var(--field-700);
  background:transparent;
}
.btn-outline:hover{ background:var(--field-700); color:var(--parchment-50); }
.btn-outline-light{
  border:1.5px solid rgba(251,247,238,0.55);
  color:var(--parchment-50);
  background:transparent;
}
.btn-outline-light:hover{ background:rgba(251,247,238,0.12); border-color:var(--parchment-50); }
.btn-onion{
  background:var(--onion-600);
  color:var(--parchment-50);
}
.btn-onion:hover{ background:var(--onion-700); transform:translateY(-1px); }

/* ============================================================
   Cards
   ============================================================ */
.card-crop{
  background:var(--paper);
  border:1px solid var(--parchment-200);
  border-radius:0.6rem;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.card-crop:hover{ transform:translateY(-4px); box-shadow:0 18px 30px -18px rgba(32,21,9,0.35); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:0.28rem 0.65rem;
  border-radius:999px;
}
.chip-wheat{ background:var(--wheat-100); color:var(--wheat-700); }
.chip-onion{ background:var(--onion-100); color:var(--onion-700); }
.chip-field{ background:var(--field-100); color:var(--field-700); }

/* Eyebrow labels */
.eyebrow{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
}

/* ============================================================
   Divider — wheat-stalk rule
   ============================================================ */
.stalk-divider{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.stalk-divider::before,
.stalk-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg, transparent, var(--soil-400), transparent);
}

/* Nav underline animation */
.nav-link{ position:relative; }
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--wheat-500);
  transition:width 0.25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

/* Mobile menu */
#mobileMenu{ transition:max-height 0.3s ease, opacity 0.25s ease; }

/* Input styling */
.field-input{
  width:100%;
  border:1.5px solid var(--parchment-200);
  background:var(--paper);
  border-radius:0.4rem;
  padding:0.75rem 1rem;
  font-size:0.95rem;
  transition:border-color 0.15s ease;
}
.field-input:focus{ border-color:var(--field-500); outline:none; }
.field-label{
  font-size:0.8rem;
  font-weight:700;
  color:var(--soil-800);
  margin-bottom:0.35rem;
  display:block;
}

/* Skeleton loader for dynamic product detail */
.skel{ background:linear-gradient(90deg,var(--parchment-200) 25%,var(--parchment-100) 37%,var(--parchment-200) 63%); background-size:400% 100%; animation:skel 1.4s ease infinite; }
@keyframes skel{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* Toast */
#toast{ transition:transform 0.3s ease, opacity 0.3s ease; }

/* Range slider accent */
input[type="range"]{ accent-color:var(--field-600); }

/* Reveal-on-scroll (used with IntersectionObserver in main.js) */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Star rating */
.star{ color:var(--wheat-500); }

/* Scrollbar for table containers */
.tbl-scroll::-webkit-scrollbar{ height:8px; }
.tbl-scroll::-webkit-scrollbar-thumb{ background:var(--parchment-200); border-radius:99px; }

/* ============================================================
   Admin panel layout
   ============================================================ */
body.admin-body{ background:var(--parchment-100); }
.side-link{ display:flex; align-items:center; gap:0.7rem; padding:0.65rem 0.9rem; border-radius:0.5rem; font-size:0.875rem; font-weight:600; color:var(--field-100); transition:background 0.15s ease; cursor:pointer; text-decoration:none; }
.side-link:hover{ background:rgba(255,255,255,0.08); }
.side-link.active{ background:var(--wheat-500); color:var(--soil-950); }
table.admin-table th{ text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--soil-600); padding:0.75rem 1rem; border-bottom:1px solid var(--parchment-200); }
table.admin-table td{ padding:0.85rem 1rem; font-size:0.85rem; color:var(--soil-800); border-bottom:1px solid var(--parchment-200); vertical-align:middle; }
table.admin-table tr:last-child td{ border-bottom:none; }