/* ============================================================
   CRUIG — Design Foundation
   Warm editorial system on a beige base, geometric type.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand palette (from brief) */
  --white:#FFFFFF;
  --beige:#FBF7E1;
  --orange:#FFA732;
  --lime:#94C700;
  --green-dark:#003900;
  --graphite:#2F2F2F;

  /* Derived tints / shades */
  --lime-700:#6f9a00;
  --lime-600:#7eae00;
  --lime-100:#eef6cf;
  --lime-50:#f6fae5;
  --orange-600:#f2920f;
  --orange-100:#ffe9c9;
  --green-700:#0a4f10;
  --green-100:#d6e7d3;
  --beige-deep:#f3edcf;
  --beige-line:#e8e1c2;

  /* Semantic */
  --ink:#2F2F2F;
  --ink-soft:#5c5c54;
  --ink-faint:#8c8b80;
  --surface:#ffffff;
  --bg:#FBF7E1;
  --line:#ece6cf;
  --line-strong:#ddd6ba;

  --danger:#d2483a;
  --danger-bg:#fbe6e3;
  --info:#2f6db0;

  /* Type */
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;

  /* Radii */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:999px;

  /* Shadow — soft, warm */
  --sh-sm:0 1px 2px rgba(47,47,47,.06), 0 2px 6px rgba(47,47,47,.05);
  --sh-md:0 4px 14px rgba(47,47,47,.07), 0 2px 6px rgba(47,47,47,.05);
  --sh-lg:0 18px 48px rgba(47,47,47,.12), 0 6px 16px rgba(47,47,47,.06);
  --sh-lime:0 10px 26px rgba(148,199,0,.28);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--display);margin:0;font-weight:600;letter-spacing:-.02em;color:var(--green-dark);}
p{margin:0;}
button{font-family:var(--body);cursor:pointer;border:none;background:none;}
a{color:inherit;text-decoration:none;}
input,select,textarea{font-family:var(--body);}
::selection{background:var(--lime);color:var(--green-dark);}

/* Scrollbar */
*::-webkit-scrollbar{width:11px;height:11px;}
*::-webkit-scrollbar-thumb{background:#d8d2b8;border-radius:99px;border:3px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:#c7c0a0;background-clip:padding-box;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:var(--r-pill);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s;
  white-space:nowrap;line-height:1;
}
.btn:active{transform:translateY(1px);}
.btn-lime{background:var(--lime);color:var(--green-dark);box-shadow:var(--sh-lime);}
.btn-lime:hover{background:var(--lime-600);box-shadow:0 14px 30px rgba(148,199,0,.36);}
.btn-dark{background:var(--green-dark);color:#fff;}
.btn-dark:hover{background:var(--green-700);}
.btn-orange{background:var(--orange);color:var(--green-dark);}
.btn-orange:hover{background:var(--orange-600);}
.btn-ghost{background:transparent;color:var(--green-dark);border:1.5px solid var(--line-strong);}
.btn-ghost:hover{background:#fff;border-color:var(--green-dark);}
.btn-white{background:#fff;color:var(--green-dark);box-shadow:var(--sh-sm);}
.btn-white:hover{box-shadow:var(--sh-md);}
.btn-sm{padding:8px 15px;font-size:13.5px;}
.btn-lg{padding:16px 30px;font-size:17px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);}
.card-pad{padding:22px;}

/* ---------- Chips / tags ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;line-height:1;
  background:var(--beige-deep);color:var(--ink-soft);border:1px solid var(--beige-line);
  transition:all .15s ease;cursor:pointer;user-select:none;
}
.chip:hover{border-color:var(--lime);color:var(--green-dark);}
.chip.is-on{background:var(--lime);color:var(--green-dark);border-color:var(--lime);box-shadow:0 4px 12px rgba(148,199,0,.25);}
.chip-sm{padding:5px 10px;font-size:12px;}
.chip-static{cursor:default;}
.chip-static:hover{border-color:var(--beige-line);color:var(--ink-soft);}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;line-height:1.2;}
.badge-lime{background:var(--lime-100);color:var(--lime-700);}
.badge-orange{background:var(--orange-100);color:var(--orange-600);}
.badge-green{background:var(--green-100);color:var(--green-dark);}
.badge-gray{background:#ededdf;color:var(--ink-soft);}
.badge-danger{background:var(--danger-bg);color:var(--danger);}

/* ---------- Inputs ---------- */
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:13px;font-weight:700;color:var(--green-dark);}
.input,.select,.textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);
  border:1.5px solid var(--line-strong);background:#fff;color:var(--ink);
  font-size:14.5px;transition:border .15s,box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 4px rgba(148,199,0,.16);}
.input::placeholder,.textarea::placeholder{color:var(--ink-faint);}
.textarea{resize:vertical;min-height:90px;}

/* ---------- Utility ---------- */
.muted{color:var(--ink-soft);}
.faint{color:var(--ink-faint);}
.mono-num{font-family:var(--display);font-variant-numeric:tabular-nums;}
.divider{height:1px;background:var(--line);border:0;}
.eyebrow{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-700);}

/* avatar ring */
.av{border-radius:50%;object-fit:cover;background:var(--beige-deep);display:inline-block;}

/* scroll-reveal helper */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

@keyframes spin{to{transform:rotate(360deg);}}
.spin{animation:spin .8s linear infinite;}

@keyframes pop{0%{transform:scale(.96);opacity:0}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .22s ease;}