/* ============================================================
   Field Notebook — NEUMORPHISM BUTTON LANGUAGE (site-wide)
   ------------------------------------------------------------
   The neumorphism.io soft-UI treatment, applied to the theme's
   button system and key form controls: dual soft shadows for a
   "raised" resting state that presses INSET on click. Shadow
   colours are tinted to the paper (light) and warm near-black
   (dark) surfaces via --nm-* tokens — not generic grey — so the
   soft-UI reads as Field Notebook.

   Loaded AFTER main.css and dark.css (see functions.php, priority
   20) so it wins the cascade. Dark-mode rules are mirrored with a
   :root[data-theme="dark"] prefix to match dark.css's specificity.
   ============================================================ */

:root{
  --nm-light:#ffffff;   /* top-left highlight (light mode)  */
  --nm-dark:#d7d1c5;    /* bottom-right shadow (light mode) */
}
:root[data-theme="dark"]{
  --nm-light:#242017;   /* warm lift on near-black */
  --nm-dark:#050404;
}

/* Shared shadow recipe (kept inline per rule for clarity):
   RAISED        5px 5px 12px dark, -5px -5px 12px light
   RAISED-HOVER  6px 6px 15px dark, -6px -6px 15px light
   INSET-COLORED inset 4/9 rgba black + white   (for sage/rust fills)
   INSET-SURFACE inset 4/9 dark + light          (for paper surfaces) */

/* ---------- Base button (colored fills: primary / rust / danger) ---------- */
.btn{
  border:0;
  border-radius:12px;
  box-shadow:5px 5px 12px var(--nm-dark), -5px -5px 12px var(--nm-light);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:6px 6px 15px var(--nm-dark), -6px -6px 15px var(--nm-light);
}
.btn:active{
  transform:translateY(0);
  box-shadow:inset 4px 4px 9px rgba(0,0,0,.26), inset -4px -4px 9px rgba(255,255,255,.14);
}
.btn:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* Dark-mode overrides (beat dark.css's :root[data-theme="dark"] .btn:hover) */
:root[data-theme="dark"] .btn:hover{
  box-shadow:6px 6px 15px var(--nm-dark), -6px -6px 15px var(--nm-light);
}
:root[data-theme="dark"] .btn:active{
  box-shadow:inset 4px 4px 9px rgba(0,0,0,.5), inset -4px -4px 9px rgba(255,255,255,.06);
}

/* ---------- Ghost = raised surface (classic neumorphism on the paper) ---------- */
.btn--ghost{
  --bg:var(--paper);--fg:var(--ink);
  background:var(--paper);
  box-shadow:5px 5px 12px var(--nm-dark), -5px -5px 12px var(--nm-light);
}
.btn--ghost:hover{
  color:var(--sage-deep);
  box-shadow:6px 6px 15px var(--nm-dark), -6px -6px 15px var(--nm-light);
}
.btn--ghost:active{
  box-shadow:inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light);
}
:root[data-theme="dark"] .btn--ghost{background:var(--paper);}
:root[data-theme="dark"] .btn--ghost:active{
  box-shadow:inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light);
}

/* ---------- Generic form submit buttons that aren't .btn ---------- */
button[type="submit"]:not(.btn):not(.fn-send):not(.fn-tool):not(.fna-account__btn):not(.fna-modal__x):not(.menu-toggle),
input[type="submit"]:not(.btn){
  border:0;border-radius:12px;cursor:pointer;
  padding:.85em 1.5em;font-family:var(--sans);font-weight:550;font-size:var(--step-0);line-height:1;
  background:var(--sage);color:var(--paper);
  box-shadow:5px 5px 12px var(--nm-dark), -5px -5px 12px var(--nm-light);
  transition:box-shadow .25s var(--ease), transform .12s var(--ease), background .25s;
}
button[type="submit"]:not(.btn):not(.fn-send):not(.fn-tool):not(.fna-account__btn):not(.fna-modal__x):not(.menu-toggle):hover,
input[type="submit"]:not(.btn):hover{background:var(--sage-deep);transform:translateY(-1px)}
button[type="submit"]:not(.btn):not(.fn-send):not(.fn-tool):not(.fna-account__btn):not(.fna-modal__x):not(.menu-toggle):active,
input[type="submit"]:not(.btn):active{transform:translateY(0);box-shadow:inset 4px 4px 9px rgba(0,0,0,.26), inset -4px -4px 9px rgba(255,255,255,.14)}
:root[data-theme="dark"] button[type="submit"]:not(.btn):not(.fn-send):not(.fn-tool):not(.fna-account__btn):not(.fna-modal__x):not(.menu-toggle),
:root[data-theme="dark"] input[type="submit"]:not(.btn){color:#14130E}

/* ---------- Newsletter form field → soft inset well ---------- */
.signup input{
  border:0;background:var(--paper);border-radius:12px;
  box-shadow:inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light);
}
.signup input:focus{
  outline:none;
  box-shadow:inset 5px 5px 11px var(--nm-dark), inset -5px -5px 11px var(--nm-light), 0 0 0 2px var(--sage-tint);
}
:root[data-theme="dark"] .signup input{
  border:0;background:var(--paper);
  box-shadow:inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light);
}
:root[data-theme="dark"] .signup input:focus{
  box-shadow:inset 5px 5px 11px var(--nm-dark), inset -5px -5px 11px var(--nm-light), 0 0 0 2px var(--sage-tint);
}

/* ---------- Hamburger → soft raised control ---------- */
.menu-toggle{
  border:0;border-radius:12px;
  box-shadow:4px 4px 10px var(--nm-dark), -4px -4px 10px var(--nm-light);
}
.menu-toggle:active{box-shadow:inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light)}

/* Respect reduced motion — no transform hops. */
@media (prefers-reduced-motion:reduce){
  .btn:hover,
  button[type="submit"]:not(.btn):hover,
  input[type="submit"]:not(.btn):hover{transform:none}
}